CSS Grid 本身不原生支持瀑布流，但可通过 grid-template-rows: masonry 实现真正瀑布流；grid-auto-flow: dense 仅能优化空间利用率，辅助填空，不能替代 Masonry。
Grid 网格布局本身不原生支持传统意义上的“瀑布流”（即各列高度不一、内容像瀑布一样依次下落并自动填充空隙），但通过 grid-auto-flow: dense 配合可变高度的网格项和合理的轨道定义，可以模拟出类似效果——尤其适合图片卡片、文章摘要等高度不一的内容展示。
理解 dense 模式的关键作用
grid-auto-flow: dense 的核心是：当自动放置算法发现某位置因跨度（grid-row 或 grid-column）被跳过而留空时，它会回头尝试把后续较短的项目“塞进”这个空位，而不是严格按源顺序一路往下排。
⚠️ 注意：它只对 自动放置的隐式网格项 生效（即未显式指定 grid-row/grid-column 的项目），且必须配合 grid-template-rows: masonry（实验性）或手动设计“伪瀑布”结构。纯 CSS Grid 标准中，dense 无法真正实现 Masonry 布局，但它能优化空间利用率。
用 grid-auto-flow:dense 模拟瀑布流的实用方法
以下是在不依赖 JavaScript 的前提下，最接近瀑布流的 Grid 实现思路（适用于现代浏览器，含 Safari 16.4+、Chrome 119+ 支持 masonry）：
-
方案一（推荐，真正 Masonry）： 使用
display: grid; grid-template-rows: masonry;—— 这是 W3C 正式定义的瀑布流模式，grid-auto-flow设为row或row dense均可，dense在此非必需但无害；列数由grid-template-columns控制，项目自动按列填充、高度自适应。 -
方案二（兼容 fallback）： 若需支持旧版 Grid 浏览器，可用
grid-auto-flow: dense+ 固定行高 + 跨行控制模拟：- 设置
grid-template-rows: repeat(100, 1fr)（足够多的等高行） - 每个项目设
grid-row: span X（X 根据内容高度估算，如 2~5） - 启用
grid-auto-flow: dense让短项目填补长项目腾出的空行
- 设置
-
关键限制： 方案二不是真正的瀑布流——它依赖预估行跨度，无法完全响应内容真实高度；
dense只能减少空白，不能改变 DOM 顺序渲染逻辑。
代码示例（Masonry + dense 安全写法）
HTML：
@@##@@ @@##@@ @@##@@
CSS：
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-auto-flow: row dense; /* 兼容性兜底，Masonry 下可省略 */
grid-template-rows: masonry; /* ✅ 真正触发瀑布流 */
}
.masonry-grid > article {
break-inside: avoid; / 防止分页/分栏断裂 /
}
什么时候该用 dense？什么时候不该用？
grid-auto-flow: dense 是把双刃剑：
- 适合场景： 卡片列表中存在明显高度差异（如图文混排）、且你希望视觉上更紧凑，允许 DOM 顺序与视觉顺序不完全一致（例如搜索结果按相关性排序，但显示时优先填空）
-
慎用场景： 内容有强阅读顺序（如步骤说明、时间线）、或依赖屏幕阅读器线性朗读——
dense可能打乱语义流 -
常见误区： 认为加了
dense就等于瀑布流；实际上它只是“填空策略”，不解决列高自适应问题。真正 Masonry 必须靠grid-template-rows: masonry或 JS
基本上就这些。用好 grid-template-rows: masonry 是当前最简洁可靠的瀑布流方案，grid-auto-flow: dense 更适合作为辅助优化手段，而非核心解法。
