高度不一的图片/作品内容需要 Pinterest…

当内容高度或宽高比不一、需要多列瀑布流做视觉优先浏览时，用它指导设计、优化与审计。

适用场景

解决思路

1. 首次调用时，若有帮助，先用 1–2 句话说明该技能覆盖什么以及为什么重要，再给出主要输出；后续调用或用户要求跳过时，直接给出主要输出。
2. 高度不一、图片多且宽高比多变、画廊/作品集/展示、发现与浏览、视觉优先时，使用 masonry。
3. 等高条目、产品/模板等一致内容、卡片网格、结构化浏览时，改用 grid；等高网格见 grid，卡片结构见 card。
4. 布局选型对比：grid 是等行列、统一条目，适合产品/模板/功能；masonry 是无行分列、条目堆叠并填补空隙，适合 Pinterest/Behance 及多变内容；bento 是有意分区、预定义尺寸，适合首页/仪表盘/Apple 风格；carousel 是幻灯片、一屏一个或少数、滑动/点击，适合证言/logo/精选，参考 carousel。
5. 设置 2–4 列，可使用流式或固定宽度。
6. 条目使用不同高度，并保持自然宽高比。
7. 设置一致的水平和垂直 gap。
8. 排序：在列内自上而下填充。
9. 实现方案：CSS columns 用 `column-count`，简单且不需 JS；但条目先自上而下流动，再进入下一列。
10. 实现方案：Masonry.js / 库实现真正 masonry，即从左到右填充；可能需要 JS。
11. 实现方案：CSS Grid + `grid-auto-flow: dense` 做近似实现，无需 JS；参考 grid 的 dense grid。
12. 可访问性：纯 masonry 可能造成屏幕阅读器顺序问题；确保逻辑 DOM 顺序正确。
13. SEO：masonry + infinite scroll 会导致内容不可爬取；masonry 画廊常使用无限滚动或懒加载，爬虫无法模拟滚动或点击 Load more，初始视图之外内容不可发现。
14. SEO：若使用无限滚动，提供带完整 URL 的分页组件页面，实现 pushState，并参考 site-crawlability 实现搜索友好的无限滚动。
15. SEO：若使用懒加载，确保内容存在于 HTML 中或可通过可爬取链接到达。
16. SEO：若使用分页，优先用于 SEO 关键内容；爬虫可跟随 next/prev 链接。
17. SEO 参考：Google 的 Infinite scroll search-friendly recommendations，链接为 https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly。
18. 最佳实践：视觉优先，使用缩略图，文本最少。
19. 最佳实践：保持原始宽高比，避免强制裁剪。
20. 最佳实践：图片多时使用懒加载，滚动时加载。
21. 最佳实践：masonry 可能较重；简单场景考虑用 grid。
22. 用例：展示/画廊使用用户作品、大小不一的格式，配合 showcase-page-generator。
23. 用例：作品集使用项目、混合媒体。
24. 用例：Pinterest 风格使用 pins、发现。
25. 用例：图片多的博客使用多变图片的博客，配合 blog-page-generator。
26. 相关技能：需要无限滚动 SEO、分页组件页面、搜索友好实现时参考 site-crawlability。
27. 相关技能：当 masonry 过度时参考 grid 的等高网格、carousel 的幻灯片/轮播、card 的卡片结构；masonry 常用卡片。
28. 相关技能：画廊 masonry 参考 showcase-page-generator；懒加载、宽高比、LCP 参考 image-optimization。

适用边界 · 注意事项

• 等高条目、产品/模板/功能等一致内容、卡片网格、结构化浏览时，不要用 masonry，应使用 grid。
• 对 SEO 关键内容且无法提供分页或可爬取链接时，不要用无限滚动 masonry。
• 简单场景、性能敏感且不需要瀑布流时，不要硬上 masonry，考虑 grid 或其他更轻布局。