CSS Grid 不支持真正的 Masonry 布局，grid-auto-flow: dense 仅按固定行高紧凑填充，无法动态贴底对齐；需结合 JS 测量高度或改用 column-count/Masonry 插件。
CSS Grid 本身不支持真正的 Masonry 布局，grid-auto-flow: dense 只是重排顺序，不是重排位置逻辑 —— 它填不上高度不均导致的跨行空隙。
为什么 grid-auto-flow: dense 看起来像 Masonry 但实际不是
这个属性只在「已有行高」的前提下尝试紧凑填充：比如你设了 grid-auto-rows: 200px，浏览器会按固定行高切分网格，再把小项塞进空位。但它不会因为某个 item 高 600px 就自动让它跨过下方三个 200px 行的间隙去“贴底”——它只会占满自己被分配到的那几行，留下视觉断层。
常见错误现象包括：
- 高 item 下方出现大片空白（尤其列数 ≥3、item 高度差异大时）
- DOM 顺序和视觉顺序错乱，影响屏幕阅读器读取
- 图片加载完成前高度为 0，JS 未重新计算
grid-row: span X就触发渲染，导致重叠或错位
什么时候该放弃纯 CSS Grid 改用 Masonry 插件
当你的场景满足以下任一条件时，硬套 Grid + JS 计算跨行数反而更脆弱：
立即学习“前端免费学习笔记（深入）”；
- item 内容动态展开/收起（如摘要折叠、评论加载）
- 图片异步加载且未用
imagesloaded等工具监听完成事件 - 服务端渲染（SSR）与客户端 hydration 高度不一致，引发 layout shift
- 需要支持 Safari 14.0 或更早版本（
column-count在 Safari 14.1+ 才稳定）
此时直接引入 masonry + imagesloaded 是更鲁棒的选择：
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
imagesLoaded('.masonry-grid', function() {
new Masonry('.masonry-grid', {
itemSelector: '.masonry-grid__item',
columnWidth: '.masonry-grid__sizer',
percentPosition: true
});
});
</script>
如果坚持用 CSS Grid，必须配合 JS 动态设置 grid-row
纯 CSS 无法响应内容高度变化，所以得靠 JS 测量每个 item 实际高度，再换算成跨行数。关键点：
- 父容器需设
grid-auto-rows: 1px（不是 0，否则计算失效），作为最小单位基准 - 用
getBoundingClientRect().height获取真实高度，除以grid-auto-rows值后Math.ceil() - 必须在图片加载完成、字体渲染完毕、所有 transition 结束后才执行测量（推荐用
ResizeObserver+imagesloaded组合） - 避免直接写
style.gridRow = 'span ' + span，改用 CSS 自定义属性传递：style.setProperty('--row-span', span)，CSS 中写grid-row: span var(--row-span);
column-count 方案比 Grid 更适合“真瀑布流”
如果你只是要视觉上错落、空间利用率高，且能接受垂直填充（即从上到下、左到右填列），column-count 是目前最稳的纯 CSS 方案：
- 兼容性好：
column-count在 Chrome 50+、Firefox 52+、Safari 14.1+ 均无问题 - 浏览器自动平衡各列高度，无需 JS 干预
- 只要加
break-inside: avoid就能防止 item 被截断在两列之间 - 响应式只需改
column-count值，不用同步维护一堆grid-row: span类
唯一代价是 DOM 顺序 ≠ 视觉顺序（比如第 4 个 item 可能出现在第 1 列底部），这对 SEO 和可访问性有轻微影响，但远小于 dense 模式下的错乱风险。
真正难的不是怎么写 CSS，而是判断哪些高度变化是静态可预知的、哪些必须交给 JS 实时响应 —— 很多项目卡在“以为加了 dense 就万事大吉”，结果上线后图片加载延迟导致布局闪跳，或者用户缩放页面时列高失衡。留出 JS 回退通道，比强行“纯 CSS”更重要。
