grid-auto-flow: dense 仅在父容器有明确轨道、部分子项显式定位、后续未定位项尺寸适配空隙时才回填空单元格；否则对gap、min-width、视觉留白等无效。
grid-auto-flow: dense 本身不是用来“消除空白”的通用工具，它只在特定条件下回填空单元格。想靠它抹掉所有视觉空白，往往适得其反——多数空白其实根本不是 dense 能管的。
先分清哪类空白 dense 能处理
dense 只对三类条件同时满足时才起作用：父容器有明确列轨道（如 grid-template-columns: repeat(4, 1fr)）、部分子项用了显式定位（比如 grid-column: 2 / 4 或 grid-row: 1 / 3）、后续未定位的子项尺寸足够小，能完整塞进前面留下的空格子里。
- 如果所有子项都写了
grid-column或grid-area，dense 完全不生效 - 如果没设
grid-template-rows或grid-auto-rows，dense 没轨道可填 - 如果空白来自
gap、min-width、或内容撑开的视觉留白，dense 视而不见
真正常见的“空白”来源和解法
多数人以为的“空白”，其实是以下几种情况，各自有更直接有效的解决方式：
-
末尾空列：用
repeat(auto-fit, minmax(250px, 1fr)))替代auto-fill，空列自动收缩为 0 -
卡片高度不一导致右侧大片留白：这不是空单元格，而是行高被最高项拉伸所致；改用
grid-auto-flow: column+ 固定列数，天然垂直填充 -
链接或内联元素撑满整个单元格：加
place-self: start和display: inline-block，让它只包裹文字，不占满轨道 - gap 在末尾延伸出的“假空白”：这是正常行为；若需交互连续，可用子项 padding 代替 gap
别硬套 dense 的替代方案
当 dense 不起效或引发 DOM/视觉顺序错乱时，这些方案更稳定：
- 多列流布局：用
column-count+break-inside: avoid，浏览器原生平衡列高，兼容性好 - 瀑布流卡片：配合
grid-auto-flow: column dense和显式列定义（如grid-template-columns: repeat(3, minmax(200px, 1fr)))） - 响应式列数：用
column-count: max(2, min(4, (100vw - 48px) / 320px))，比 Grid 的 auto 更可控
调试时快速定位问题
打开浏览器 DevTools 的 Grid 面板，勾选“Show line numbers”和“Overlay grid”，观察：
- 空白处是否真没有网格线交点？没有 → 不是 dense 能填的空单元格
- 所有子项是否都被 outline 高亮？没高亮的可能是被
visibility: hidden或display: none隐藏了 - 临时把子项
min-width改成0，看空白是否消失——若消失，说明是尺寸限制导致的换行
