纯CSS实现真正Masonry效果仅Chrome/Edge 116+支持grid-template-rows: masonry，需display: grid且明确grid-template-columns，子项禁用grid-row；Safari/Firefox不支持，降级推荐grid-auto-flow: dense配合JS预设跨行。
纯 CSS 实现“真正 Masonry 效果”的瀑布流，目前只在 Chrome 116+ 和 Edge 116+ 中可用，grid-template-rows: masonry 是唯一原生支持动态高度列平衡的属性；其余浏览器（包括 Safari、Firefox）完全不识别它，降级必须有预案。
用 grid-template-rows: masonry 的前提和限制
这个属性不是“加了就能用”，它对容器和子项有硬性要求：
- 容器必须设
display: grid，且grid-template-columns必须明确（不能是auto或未定义） - 子项不能设
grid-row或grid-column，否则会退出 Masonry 流式布局，退化为普通 Grid 定位 - 图片加载后高度变化不会触发重排——
grid-template-rows: masonry只在首次渲染时计算，后续 DOM 尺寸变更无效 - 无法与
grid-auto-flow: dense共存；也不能和grid-template-rows的显式值混用
兼容 fallback：用 grid + grid-auto-flow: dense 模拟
这是目前最可控、可预测的降级方案，适用于卡片高度可预估（如后端返回宽高比或固定几档高度）的场景：
- 容器写
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-flow: dense; - 每个子项根据内容高度标注
grid-row-end: span 2、span 3等（需 JS 预算或服务端注入） - 避免设
overflow: hidden在容器上，否则跨行元素会被裁剪 - 图片必须设
width: 100%; height: auto;，否则子项高度塌陷，dense会错乱排列
别碰 column-count 的几个真实翻车点
它看起来最简单，但线上问题最多，尤其在非静态页中：
-
break-inside: avoid在 Safari 上基本失效，必须加-webkit-column-break-inside: avoid - 子项若含
position: absolute元素（比如角标 badge），会脱离列上下文，定位偏移甚至消失 - DOM 顺序 ≠ 视觉顺序，影响 SEO、屏幕阅读器、打印样式，也导致
:nth-child选中错乱 - 图片异步加载完成前，
getBoundingClientRect().height返回 0，列高塌陷，出现大片空白 - Chrome 下
display: inline，会在列底留白；必须统一设img { display: block; }
什么时候必须上 JavaScript（Masonry.js）
只要满足以下任一条件，CSS 方案就该让位：
- 图片宽高不可预知，且需等
load事件后才布局（imagesLoaded插件必须配） - 要支持动态插入新卡片（比如无限滚动），且不能全量重排——得调
layout.appended()，不是reloadItems() - 父容器有
transform或filter（如backdrop-filter），会导致 Masonry.js 内部getBoundingClientRect()坐标偏移 - 子项选择器写成
.masonry > div > .item这类非直系路径，初始化直接失败，控制台报no items found
真正麻烦的从来不是“怎么实现第一屏”，而是“图片加载完、窗口 resize 后、用户拖拽排序时，布局还稳不稳”。CSS 方案越想绕开 JS，越容易在这些环节漏掉一两个 resize 监听或 img.onload 回调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
