grid-auto-flow: dense 并非通用空白填充方案，仅当父容器有明确轨道、存在显式定位导致空洞、且后续未定位项能填入空洞时才生效；它不生成新轨道，仅在现有轨道中插空。
grid-auto-flow: dense 不是解决“网格空白碎片填充”的通用方案，它只在极少数明确条件下才真正起作用——多数人加了它却没变化，是因为根本没触发它的逻辑。
为什么写了 grid-auto-flow: dense 却完全没反应
根本不是 dense “失效”，而是你没给它可调度的项。dense 只对未显式定位的子元素生效，一旦写了 grid-row、grid-column 或 grid-area，它就彻底退出。
- 所有子项都设了
grid-column: 1或grid-row: 2 / 4→ dense 完全不参与布局 - 父容器用了
grid-template-areas→ 区域模板已固化，dense 被忽略 - 只写了
grid-template-columns，但没配grid-auto-rows或grid-template-rows→ 没有隐式行轨道，dense 无格可填 - 同时写了
grid-template-rows: 100px 100px和grid-auto-rows: minmax(50px, auto)→ 显式行覆盖自动行，dense 失去作用范围
grid-auto-flow: dense 真正生效的三个硬性条件
必须同时满足，缺一不可：
- 父容器有
display: grid且定义了明确轨道，比如grid-template-columns: repeat(4, 1fr) - 至少一个子项用了显式定位（如
grid-row: 1 / 3或grid-column: 2 / 4），导致后续位置出现空洞 - 后续未定位子项的尺寸（尤其是宽度）小于当前行剩余列宽，且能完整放进那个空洞里
示例：第 1 行已有 .a { grid-column: 1 / 3; } 和 .b { grid-column: 3; }，那么第 4 列就是空的；此时 .c 没写任何定位，grid-auto-flow: dense 才可能把它塞进第 1 行第 4 列，而不是默认推到第 2 行开头。
立即学习“前端免费学习笔记（深入）”；
row dense 和 column dense 的行为差异很关键
方向不同，“空位”识别逻辑完全不同，不能互换使用：
-
grid-auto-flow: row dense：从左到右、从上到下扫描，只在同一行内找空格子；适合卡片宽度统一、高度相近的横向流 -
grid-auto-flow: column dense：从上到下、从左到右扫描，但只在当前列内部找空；不会跨列插队，更适合瀑布流类垂直优先布局 - 两者都不改变 DOM 顺序，但视觉跳跃程度不同：
column dense在窄屏下容易让右侧突然冒出一个元素，row dense更可能把小卡片全挤进第一行撑高容器
真正可控的“空白处理”，往往得绕开 dense
当你要的是视觉连续、可访问性可靠、响应式稳定的效果，dense 往往是陷阱而非解法：
- 想让空位置有背景或边框？必须让它“物理存在”：用
grid-template-areas预留点号.（前后空格分隔），再配合显式列宽；或 JS 动态插入带class="placeholder"的空<div> - 要平衡列高、适配高度不均的卡片？
column-count+break-inside: avoid比 dense 更稳，兼容性也够（Chrome 50+、Firefox 52+、Safari 14.1+） - gap 看起来像“空白碎片”？那是间距不是空单元格，
gap: 0.5rem比gap: 40px更不容易造成错觉
最常被忽略的一点：dense 从不生成新轨道，也不压缩内容，只在已有轨道中插空。一旦容器高度受限、或子项用了 minmax(100px, auto) 导致行高浮动，dense 就基本停摆——这时候调参不如换方案。
