纯 css 无法用 grid-auto-flow 实现真正的瀑布流；它仅能模拟视觉错落，因浏览器不支持按列高动态分配元素，且 dense 模式仅在高度固定、不跨行时有限生效。
纯 CSS 无法用 grid-auto-flow 实现真正的瀑布流（Masonry），它最多只能模拟出“视觉错落”的效果；想靠 grid-auto-flow: column 或 grid-auto-flow: dense 让元素按列高自动填满，浏览器根本不支持——这是当前所有主流引擎的硬限制。
为什么 grid-auto-flow: column 不是瀑布流
很多人误以为把 grid-auto-flow 设为 column 就能实现列优先填充，结果发现：元素只是从上到下、从左到右机械换列，完全不感知列的实际高度，更不会把新元素塞进最短列。它本质是「列方向的线性流」，不是「按列高动态分配」。
常见错误现象：
-
grid-auto-flow: column下，所有项目高度被强制拉平或截断，尤其图片会严重失真 - 容器设了
grid-auto-rows: 10px后，文字换行、图片懒加载导致实际高度变化，但span值没更新，直接重叠或留大片空白 - 在 Safari 或 Firefox 中，
grid-auto-flow: dense对跨行项几乎无效，空洞无法填补
grid-auto-flow: dense 的真实作用和边界
grid-auto-flow: dense 只在「不跨行、不跨列、高度固定」的前提下才可能紧凑填充空隙。它不是智能调度器，不会重新计算布局，只是在已有网格轨道中尝试复用未被占用的位置。
使用场景非常有限：
- 卡片内容高度完全一致（如统一
height: 200px） - 所有子项都用
grid-column: auto，没写死grid-column-start - 没用
grid-row-end: span—— 一旦手动跨行，dense就基本失效 - 必须配合显式
grid-template-rows（不能只靠grid-auto-rows）
典型翻车点：grid-auto-flow: dense 和 grid-auto-rows: 10px 一起用，本意是让小图占 3 行、大图占 12 行，结果 dense 把一个刚放下的大图后面空出的 2 行，塞进了一个本该在下一行开始的小图——造成视觉错位。
真正能落地的响应式方案只有两个
别在 grid-auto-flow 上死磕。目前稳定可用的路径就两条，选哪个取决于你对「纯 CSS」和「真实 Masonry 行为」的取舍：
-
用
column-width+break-inside: avoid：最轻量、兼容性最好（IE11 都行），但列宽是“最小建议值”，浏览器决定最终列数；必须加break-inside: avoid，否则长图会被切开；column-gap控制列间距，但行内垂直间距得靠子项margin-bottom -
用
grid-template-columns: repeat(auto-fill, minmax(...))+ JS 动态算grid-row-end：列数响应式强，但需要 JS 获取真实渲染高度并向上取整设置span；必须防抖 + 监听ResizeObserver，不能只靠window.resize；auto-fill比auto-fit更稳，避免最后一行列宽突变
复杂点在于：图片加载完成前，getBoundingClientRect().height 返回的是 0 或占位高度；字体加载延迟也会改变行高；这些都得在 JS 里兜住，CSS 自己做不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
