CSS Grid如何实现类似Masonry瀑布流布局_使用grid-template-rows的masonry值-css教程-PHP中文网

grid-template-rows: masonry 目前无效，因所有主流浏览器均未正式支持该语法：Safari 和 Firefox 直接忽略规则，Chrome 120+ 仅实验性支持且需严格满足多项条件，@supports 检测恒为 false，JS 动态设置亦静默失败。

css grid如何实现类似masonry瀑布流布局_使用grid-template-rows的masonry值

目前不能用——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' 同样静默失败，无报错、无日志、无视觉变化。

唯一可行的降级写法是：

剧云

一款AI工具，主要用于专业、高效、安全的中文剧本在线创作与管理工具，适合需要提升相关任务效率的用户。

下载

@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