grid-template-rows: masonry 是目前唯一原生支持动态列高平衡的 CSS 瀑布流方案，但需满足 display: grid、显式定义 grid-template-columns、grid-auto-flow: column，且子项不能破坏流式上下文，同时必须用 @supports 检测并提供降级方案。
grid-template-rows: masonry 是目前唯一原生支持动态列高平衡的 CSS 瀑布流方案，但它不是“加了就生效”，必须满足硬性条件才能触发真正的 Masonry 行为。
必须显式声明 display: grid 且列定义不可省略
容器只写 grid-template-rows: masonry 不起作用。它依赖明确的列结构来划分“填入区域”。grid-template-columns 必须存在，且不能是 auto、fit-content() 或未定义状态。
- ✅ 正确：
grid-template-columns: repeat(3, 1fr)或repeat(auto-fill, minmax(280px, 1fr)) - ❌ 错误：
grid-template-columns: auto、grid-template-columns: unset、或完全不写该属性 - ⚠️ 注意：
grid-auto-flow: row（默认值）会让子项按行填充，变成普通网格；必须写grid-auto-flow: column才启用瀑布流方向
子项不能破坏 Masonry 流式上下文
grid-template-rows: masonry 只对“自由流入”的子项生效。一旦你给子项设了 grid-row、grid-column、position: absolute 或 transform，它就退出 Masonry 模式，退化为普通 Grid 定位。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 子项禁止写
grid-row: 1 / -1或类似跨行声明 - 图片需用
width: 100%; height: auto;，避免高度塌陷；更推荐配合aspect-ratio占位（如aspect-ratio: 4/3）防止加载跳闪 - 如果子项内有 badge、价格标签等绝对定位元素，必须给子项本身加
position: relative
浏览器支持和降级必须主动处理
截至 2026 年 5 月，grid-template-rows: masonry 仅在 Chrome 116+ 和 Edge 116+ 中默认启用（无需 flag）。Safari 和 Firefox 完全忽略该声明，会回退到 display: grid 的默认行为——也就是单行排列，页面直接崩。
立即学习“前端免费学习笔记（深入）”；
- 必须用
@supports (grid-template-rows: masonry)包裹 Masonry 样式，并提供 fallback（例如column-count方案） - 不要依赖 JS 检测是否支持 Masonry：CSS
@supports是唯一可靠方式 - 图片加载后尺寸变化不会触发重排——Masonry 高度只在首次渲染时计算；所以
aspect-ratio或服务端预设宽高比仍是刚需
真正难的不是写对那三行 CSS，而是确保所有子项都“不越界”、所有浏览器都有 fallback、所有图片加载过程不破坏布局节奏——这些细节漏掉一个，masonry 就只是个被忽略的无效声明。
