grid-auto-flow: dense 不能实现瀑布流，因为它仅回填固定高度下的显式跳过空格，无法动态调整列高或移动元素；真瀑布流需手动定位或用 JS 计算列高。
grid-auto-flow: dense 为什么不能让瀑布流“自动填空”
它根本不是为瀑布流设计的。grid-auto-flow: dense 只负责回填被 grid-row-start / grid-row-end 显式跳过的空格子，前提是所有元素都用相同行高（即固定高度）。瀑布流要求每项高度不一、且能动态“下坠”到左侧最短列——Grid 的 track 是静态划分的，dense 不会重新计算列高，也不会移动已定位的元素。
CSS Grid 做真瀑布流必须放弃 auto-placement
你得手动控制每项落在哪一列、占几行。关键不是靠 grid-auto-flow，而是用 grid-column + grid-row 精确指定位置：
- 先按列数（比如 3 列）把容器设为
grid-template-columns: repeat(3, 1fr) - 每项元素显式设置
grid-column: 1/grid-column: 2/grid-column: 3 - 再配合 JS 计算当前列总高度，给新元素设
grid-row-start（例如grid-row: 5 / span 2） -
grid-auto-flow: dense在这里毫无作用；删掉它反而更可控
常见错误：把 Masonry 当成 Grid 原生能力
Chrome 116+ 支持 grid-template-rows: masonry，但它和传统瀑布流仍有差异：
- 只支持单方向（
grid-template-rows: masonry按行排列，grid-template-columns: masonry按列排列），不能混用 - 不兼容 Safari 和 Firefox，目前无 polyfill
- 无法与
grid-area或跨行/跨列元素共存，一加就退化成普通 grid - 错误写法：
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry;—— 这在 Safari 里直接失效，页面空白
实际项目中更靠谱的替代方案
别硬扛 CSS Grid 做瀑布流。真实业务里，稳定性和兼容性比“纯 CSS”重要得多：
立即学习“前端免费学习笔记（深入）”；
- 用
column-count+break-inside: avoid：简单、兼容好，但无法控制列间高度差，会出现大片空白 - 用
Masonry（W3C 提案，Chrome 实现名grid-template-rows: masonry）仅限实验性场景 - JS 方案仍是主力：
react-virtualized/masonic/ 手写 column-height map +position: absolute定位 —— 虽然重，但高度可控、可懒加载、可动画 - 如果非要用 Grid，就接受它只是“伪瀑布流”：所有项高度一致，用
grid-auto-flow: dense防止空隙，但这已经不是用户想要的视觉效果了
真正难的不是写几行 CSS，而是想清楚：你到底要的是“看起来像瀑布流”，还是“行为上必须响应高度变化并实时重排”。前者可以妥协，后者 Grid 目前做不到。
