grid-template-rows: masonry 目前不可用，因仍属 css grid level 3 草案，所有主流浏览器均未实现；chrome 120+ 仅实验性支持且限制多、不稳定，firefox 和 safari 完全不识别，@supports 检测恒失败，真实可用方案仅有 column-count 或 grid + js 动态分配。
grid-template-rows: masonry 目前仍处于 CSS Grid Level 3 草案阶段，**所有主流浏览器均未实现该特性**——你在 Chrome、Firefox、Safari 或 Edge 中写 grid-template-rows: masonry，它会被完全忽略，不会触发任何瀑布流行为。
为什么grid-template-rows: masonry现在不能用
这个值是为未来设计的语义化声明，目标是让 Grid 容器原生支持列高自适应填充。但现实是：
- Chrome 从 120 版起开始实验性支持（需开启
chrome://flags/#enable-experimental-web-platform-features），但仅限于grid-auto-flow: column+grid-template-rows: masonry组合，且不支持响应式重排、图片加载延迟、SSR 首屏等真实场景 - Firefox 和 Safari 完全不识别该语法，
@supports (grid-template-rows: masonry)永远返回false - 即使开启实验标志，一旦页面中有字体加载、图片懒加载、动态插入节点等操作，布局就会错乱或卡死
- W3C 规范尚未冻结，API 可能变动（比如是否保留
masonry这个关键字，或改用grid-template-rows: subgrid衍生机制）
别被@supports检测误导
网上常见写法：
@supports (grid-template-rows: masonry) {
.masonry { grid-template-rows: masonry; }
}
这行不通。原因很直接：
-
@supports检测的是浏览器是否“声明支持该语法”，不是“是否已实现该功能” - 目前所有浏览器都未将
masonry注册为合法值，所以检测永远失败 - 试图用 JS 动态设置
element.style.gridTemplateRows = 'masonry'也会静默失败，无报错、无效果
真正能落地的替代方案只有两个
如果你需要今天就上线、用户能稳定看到瀑布流效果，只能选以下之一：
-
多列布局（
column-count）：加break-inside: avoid+column-gap，无需 JS，兼容到 IE10+，唯一缺点是无法控制单个子项跨列、hover 动画可能闪烁 -
Grid + JS 动态分配（
grid-auto-flow: column）：用 JS 维护每列当前高度，调用getBoundingClientRect().height获取真实渲染高度，再通过item.style.order或container.appendChild(item)重排。必须配合ResizeObserver处理列数变化，且要在图片load后重新计算
二者都不依赖 masonry，也不受草案状态影响。现在写代码，别押注在还没落地的标准上。
什么时候可以放心写grid-template-rows: masonry
等你看到以下信号再考虑：
-
caniuse.com显示 Chrome/Firefox/Safari 三端「稳定支持」栏全部打勾（不是「实验性」或「需 flag」） -
@supports (grid-template-rows: masonry)在 Safari 技术预览版中返回true，且 SSR 渲染后首屏不闪、不白屏 - 社区出现大量生产环境案例，且没人反馈「图片加载完列高没重算」或「resize 后 order 值失效」这类问题
在此之前，所有声称「已用 masonry 实现瀑布流」的 demo，背后都藏着 JS 逻辑，只是没告诉你而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
