grid-template-rows: masonry 目前无效，因所有主流浏览器均未正式支持该语法：Safari 和 Firefox 直接忽略规则，Chrome 120+ 仅实验性支持且需严格满足多项条件，@supports 检测恒为 false，JS 动态设置亦静默失败。
目前不能用——grid-template-rows: masonry 在所有主流浏览器中均未正式支持，Chrome 120+ 仅实验性开启且限制极多，Firefox 和 Safari 完全不识别该值，写上去等于没写。
为什么 grid-template-rows: masonry 现在写无效
这不是“兼容性差”，而是语法未被解析：Safari 和 Firefox 遇到该声明会直接忽略整条规则，退化为默认的 grid-auto-flow: row，结果是所有子项堆成一列；Chrome 即使开启 chrome://flags/#enable-experimental-web-platform-features，也只在严格满足以下条件时才可能触发（且不稳定）：
-
grid-auto-flow必须设为column，不能是row或dense -
grid-template-columns必须显式写出，auto-fill和auto-fit会被拒绝 - 容器必须有明确的
height或max-height，min-height不够 - 子项不能有任何
grid-row-start、grid-row-end、grid-column等显式定位 - 子项内部不能含
position: absolute、float、contain: layout等触发新 BFC 的属性 - 图片加载完成后的高度变化不会触发重排——它只在首次渲染时计算一次
@supports (grid-template-rows: masonry) 检测永远失败
这不是 bug，是设计如此：@supports 检测的是浏览器是否“声明支持该 CSS 值”，而非“是否已实现”。当前所有浏览器都未将 masonry 注册为合法值，所以检测恒为 false。试图用 JS 动态设置 element.style.gridTemplateRows = 'masonry' 同样静默失败，无报错、无日志、无视觉变化。
唯一可行的降级写法是：
立即学习“前端免费学习笔记（深入）”；
@supports not (grid-template-rows: masonry) {
.masonry { column-count: 3; column-gap: 1rem; }
.masonry > * { break-inside: avoid; }
}注意：break-inside: avoid 只对直系子元素生效，若中间嵌套了 wrapper，就得把该声明移到 wrapper 上。
真正能上线的替代方案只有两个
别纠结“未来会不会支持”，今天就要用户看到正确布局：
-
纯 CSS 方案：用
column-count+break-inside: avoid。兼容 IE10+，轻量、无 JS、首屏即呈现。缺点是无法控制某一项落在哪一列，:hover动画在列间可能闪烁，图片加载延迟时偶有截断（需配合img { display: block; width: 100%; height: auto; }） -
JS 方案：用
ResizeObserver监听容器宽高变化，用getBoundingClientRect().height获取真实渲染高度，维护每列当前总高，按最短列插入下一项。必须在img.onload后重新计算，否则图片撑开后布局错乱；移动端还需处理 orientationchange
复杂点不在“怎么写”，而在于：所有看似“自动”的瀑布流，背后都有显式或隐式的高度依赖。你省略的每一处尺寸约束，都会在图片加载、字体回流、动态插入节点时暴露出来。
