Masonry Grid
瀑布流
元素宽度一致、高度不等的错落多列流式布局，多用于富图片社区与图文卡片。
Live Demo
真的可以点你刚才看到的这个：小红书或 Pinterest 首页：左边一张长图买家秀，右边是一张方形短卡片，右边卡片下方紧接着补上一张中等长度的美食图，两列底部错落有致但内部紧凑饱满。
它到底是什么
瀑布流解决了「不同长宽比内容在传统对齐网格中造成大片底部空白」的难题。就像砌砖师傅砌砖墙一样，下一张卡片会自动插入到当前高度最短的那一列下方，消灭割裂的留白，形成极其紧凑、沉浸且引人不断往下滚动的视觉流动体验。
Anatomy · 它由什么组成
Columns自适应列数
根据屏幕宽度划分 2~4 列
Variable-Height Card不定高卡片
根据图片自然比例撑开高度
Gutter Gap列间与行间距
列与行保持等距水槽
Break Avoid防断裂规则
CSS break-inside: avoid 防止卡片被腰斩
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 图片社区、摄影画廊、灵感收集站（小红书/Pinterest） | 用 |
| 用户生成内容（UGC）卡片，图片尺寸和文字长短不可控 | 用 |
| 商品导购、买家秀穿搭瀑布流 | 用 |
| 需要严格按行对比参数的规格参数表（极易导致阅读混淆） | 不用 |
| 强因果顺序或强逻辑先后步骤的流程展示 | 不用 |
用在需要逐行从左到右对比数据差异的场景中，错位的高度会严重打乱人眼的横向扫描线。
未设置卡片内部防断裂（break-inside-avoid），导致一张卡片被浏览器硬生生切成上下两半跨列显示。
Similar Patterns
别搞混Masonry Grid当前
瀑布流
元素宽度一致、高度不等的错落多列流式布局，多用于富图片社区与图文卡片。
Bento Grid
便当盒网格
源自日式便当盒的非对称模块化网格，通过卡片高低宽窄的拼图组合展示特性。
一句话区分：元素宽度一致、高度不等的错落多列流式布局，多用于富图片社区与图文卡片。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
用 CSS 多列布局实现两列（手机端）到三列（桌面端）图片瀑布流：卡片圆角 12px，底部边距 16px，设置防断裂，卡片内包含图片、标题和点赞数。
不要只对 AI 说
Bad → Better不要这样对 AI 说
做个高低不平的卡片列表。
改成这样说
实现响应式瀑布流：columns-2 sm:columns-3 lg:columns-4 gap-4，卡片应用 break-inside-avoid mb-4，图片采用自适应比例，避免重排闪烁。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。