masonry
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseComponents: Masonry Layout
组件：Masonry Layout
Guides masonry layout design for content with varying heights. Masonry stacks items in columns without distinct rows; items fill gaps like a brick wall. Best for image galleries, portfolios, and discovery-focused platforms.
When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
用于指导高度不一的内容的Masonry布局设计。Masonry会将元素按列堆叠，没有明确的行划分，元素会像砖墙一样填补空隙，最适合图片画廊、作品集和侧重内容发现的平台。
调用时：首次使用时，如果有帮助，可以先用1-2句话说明该技能覆盖的内容及其重要性，再提供核心输出。如果是后续调用或者用户要求跳过说明，请直接输出核心内容。
When to Use Masonry
何时使用Masonry
| Use masonry when | Use grid when |
|---|---|
| Varying heights | Equal-height items |
| Image-heavy; varied aspect ratios | Products, templates (consistent) |
| Gallery, portfolio, showcase | Card grid |
| Discovery, browsing; visual-first | Structured browsing |
See grid for equal-height grid; card for card structure.
| 以下场景使用Masonry | 以下场景使用Grid |
|---|---|
| 内容高度不一 | 元素高度一致 |
| 图片占比高、宽高比多样 | 产品、模板类一致性内容 |
| 画廊、作品集、展示页 | 卡片网格 |
| 内容发现、浏览场景，视觉优先 | 结构化浏览场景 |
等高网格相关内容可参考grid，卡片结构相关内容可参考card。
Masonry vs Grid vs Bento vs Carousel
Masonry、Grid、Bento、Carousel对比
| Layout | Structure | Best for |
|---|---|---|
| Grid | Equal rows and columns; uniform items | Products, templates, features |
| Masonry | Columns; items stack without rows; gaps filled | Pinterest, Behance; varied content |
| Bento | Intentional sections; predefined sizes | Homepage, dashboard; Apple-style |
| Carousel | Slides; one/few visible; swipe/click | Testimonials, logos, featured items; see carousel |
| 布局 | 结构 | 适用场景 |
|---|---|---|
| Grid | 行列均等，元素尺寸统一 | 产品、模板、功能模块展示 |
| Masonry | 按列排布，元素无行约束，自动填补空隙 | Pinterest、Behance类内容多样的平台 |
| Bento | 板块划分明确，尺寸预定义 | 首页、仪表盘，苹果风格设计 |
| Carousel | 幻灯片形式，单次展示1/多个内容，支持滑动/点击切换 | testimonials、logo墙、精选内容展示，相关内容可参考carousel |
Masonry Structure
Masonry结构
| Element | Purpose |
|---|---|
| Columns | 2–4 columns; fluid or fixed |
| Items | Varying heights; natural aspect ratio |
| Gap | Consistent horizontal and vertical spacing |
| Order | Top-to-bottom fill within columns |
| 元素 | 作用 |
|---|---|
| 列 | 2-4列，支持自适应或固定宽度 |
| 元素 | 高度不一，保留原生宽高比 |
| 间距 | 水平和垂直间距保持一致 |
| 排序 | 列内按从上到下的顺序填充 |
Implementation
实现方式
- CSS columns: ; simple, no JS; but items flow top-to-bottom then next column
column-count - Masonry.js / libraries: True masonry (left-to-right fill); may need JS
- CSS Grid + : Approximate; no JS; see grid for dense grid
grid-auto-flow: dense
Note: Pure masonry can create accessibility challenges (screen reader order); ensure logical DOM order.
- CSS columns：使用属性，实现简单无需JS，但元素按列从上到下排列，排满一列再进入下一列
column-count - Masonry.js / 相关库：实现真正的瀑布流（从左到右填充），通常需要JS支持
- CSS Grid + ：近似实现瀑布流效果，无需JS，稠密网格相关内容可参考grid
grid-auto-flow: dense
注意：纯Masonry布局可能存在无障碍问题（屏幕阅读器读取顺序异常），请确保DOM顺序符合逻辑。
SEO Considerations
SEO注意事项
Masonry + infinite scroll = content not crawlable. Masonry galleries often use infinite scroll or lazy load; crawlers cannot emulate scroll or "Load more" clicks, so content beyond the initial view is not discoverable.
| If you use | Then |
|---|---|
| Infinite scroll | Provide paginated component pages with full URLs; implement pushState; see site-crawlability for search-friendly infinite scroll |
| Lazy load | Ensure content exists in HTML or is reachable via crawlable links |
| Pagination | Prefer for SEO-critical content; crawlers can follow next/prev links |
Masonry + 无限滚动 = 内容无法被爬取。 Masonry画廊通常使用无限滚动或懒加载，爬虫无法模拟滚动或“加载更多”点击操作，因此首屏之外的内容无法被抓取发现。
| 如果你使用 | 对应处理方式 |
|---|---|
| 无限滚动 | 提供带完整URL的分页组件页面，实现pushState；搜索友好的无限滚动实现可参考site-crawlability |
| 懒加载 | 确保内容存在于HTML中，或者可以通过可爬取的链接访问到 |
| 分页 | SEO关键内容优先使用分页，爬虫可以跟随next/prev链接爬取 |
Best Practices
最佳实践
| Principle | Practice |
|---|---|
| Visual-first | Thumbnails; minimal text |
| Aspect ratio | Preserve original; avoid forced cropping |
| Lazy load | Many images; load on scroll |
| Performance | Masonry can be heavy; consider grid for simpler cases |
| 原则 | 实践方式 |
|---|---|
| 视觉优先 | 使用缩略图，最小化文本内容 |
| 宽高比 | 保留原始宽高比，避免强制裁剪 |
| 懒加载 | 图片量多时开启懒加载，滚动时再加载资源 |
| 性能 | Masonry布局性能开销较高，简单场景可考虑使用Grid |
Use Cases
适用场景
| Use case | Format | Page Skill |
|---|---|---|
| Showcase / Gallery | User work; varied sizes | showcase-page-generator |
| Portfolio | Projects; mixed media | — |
| Pinterest-style | Pins; discovery | — |
| Image-heavy blog | Blog with varied images | blog-page-generator |
| 场景 | 形式 | 关联页面技能 |
|---|---|---|
| 展示页/画廊 | 用户作品、尺寸多样的内容 | showcase-page-generator |
| 作品集 | 项目、混合媒体内容 | — |
| Pinterest风格页面 | Pin内容、发现类场景 | — |
| 图片占比高的博客 | 图片样式多样的博客 | blog-page-generator |
Related Skills
相关技能
- site-crawlability: Infinite scroll SEO; paginated component pages; search-friendly implementation
- grid: Equal-height grid; when masonry is overkill
- carousel: Carousel for slides/rotation; when masonry is overkill
- card: Card structure; masonry often uses cards
- showcase-page-generator: Gallery masonry
- image-optimization: Lazy load, aspect ratio, LCP
- site-crawlability：无限滚动SEO、分页组件页面、搜索友好实现
- grid：等高网格，Masonry过度设计时的替代方案
- carousel：幻灯片/轮播布局，Masonry过度设计时的替代方案
- card：卡片结构，Masonry布局通常使用卡片作为元素载体
- showcase-page-generator：画廊类Masonry布局
- image-optimization：懒加载、宽高比处理、LCP优化