Masonry Layout (Pinterest Grid) new 瀑布流布局（Pinterest 网格） web
Cards of different heights packed into columns with no row gaps
高度各异的卡片紧塞进列中，行线完全错开
Masonry
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Packed column紧凑堆叠的列（Packed column）
columns / grid track“The cards stack straight down with nothing lining up sideways” — each column packs independently, which is the whole trick.
“卡片笔直往下叠，横向什么都不对齐” —— 每列各自独立紧凑堆叠，这正是全部诀窍。
Prompt fragmentPrompt 片段one packed column of the masonry wall: items stack top-to-bottom with a fixed column gap, each new item joining the currently shortest column
瀑布墙上的一根紧凑列：条目从上到下堆叠，列间距固定，每个新条目加入当前最短的列
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a masonry layout (Pinterest-style): native CSS first — @supports (grid-template-rows: masonry) { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry; } — with a CSS multi-column fallback (columns: 3; every card break-inside: avoid). Note the fallback orders items down each column, not across rows; if strict left-to-right order matters, use react-masonry-css instead. Reserve image aspect ratios so cards don't jump while loading.
构建一个瀑布流布局（Pinterest 风格）：优先用原生 CSS —— @supports (grid-template-rows: masonry) { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry; } —— 降级用 CSS 多列（columns: 3；每张卡片 break-inside: avoid）。注意降级方案里条目沿每列向下排，不是按行；如果严格要求从左到右的顺序，改用 react-masonry-css。提前占位图片宽高比，避免加载时卡片跳动。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my masonry layout (CSS columns fallback / grid-template-rows: masonry). Rule out: cards splitting across columns because break-inside: avoid is missing; item order reading down the first column when the design expects row-major; equal-height rows appearing because the browser lacks native masonry and there's no @supports fallback; the wall reshuffling as images load because width/height aren't reserved; margins on cards fighting the column-gap. The symptom:
调试我的瀑布流布局（CSS columns 降级 / grid-template-rows: masonry）。逐项排除：缺了 break-inside: avoid，卡片被拆到两列；设计期望按行优先读，条目却顺着第一列往下排；浏览器不支持原生 masonry 又没写 @supports 降级，出现等高行；图片没预留 width/height，加载时整面墙重新洗牌；卡片上的 margin 和 column-gap 打架。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | columns | works everywhere today — but items flow DOWN each column, not across rows今天到处都能用 —— 但条目是沿每列向下排的，不是按行横排 |
| CSS | grid-template-rows: masonry | native (Grid Lanes): Safari 26; behind flags elsewhere in 2026 — pair with @supports原生方案（Grid Lanes）：Safari 26 已支持；2026 年其他浏览器还在 flag 后面 —— 记得配 @supports |
| React | react-masonry-css | JS split into per-column stacks when row-major order matters在意按行优先顺序时，用 JS 把条目分进各列的堆栈 |
| CSS | break-inside: avoid | stops cards splitting across columns in the fallback防止卡片在降级方案里被拆到两列 |