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 定位。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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 就只是个被忽略的无效声明。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！