grid-auto-flow: dense 仅对未显式定位的项在已有轨道中插空，若所有子项均显式定位、区域模板固化、隐式轨道缺失或行列定义冲突，则完全不生效。
加了 grid-auto-flow: dense 却没填空？大概率是因为它根本没被触发——dense 不是“自动补空白”的开关，只对未显式定位的项生效，且只在已有轨道中插空。
为什么 grid-auto-flow: dense 完全没反应
最常见原因：所有子元素都写了 grid-row、grid-column 或 grid-area。dense 只调度“无家可归”的项，一旦显式定位，它就彻底旁观。
- 用了
grid-template-areas：区域模板已固化位置，dense 无效 - 只设了
grid-template-columns没配grid-auto-rows（或grid-template-rows）：隐式行轨道不存在，dense 无格可填 - 同时写了
grid-template-rows和grid-auto-rows：显式行会覆盖自动行，dense 失去作用范围
grid-auto-flow: row dense 和 grid-auto-flow: column dense 填空行为完全不同
方向决定“空位”怎么被识别和回填，不是换词就能通用：
-
row dense：从左到右、从上到下扫描，找的是**同一行内**的空格子；适合卡片宽度统一、高度差异不大的横向流 -
column dense：从上到下、从左到右扫描，但“找空格子”只发生在**当前列内部**；不会跨列把一个项塞进左边列的空位，更适合瀑布流类垂直优先布局 - 两者都不改变 DOM 顺序，但视觉跳跃程度不同：
column dense在窄屏下容易出现“左边一长列、右边突然冒一个”的错觉
真正能填空的实操条件（缺一不可）
必须同时满足三个硬性条件，dense 才会真正“填空”：
- 父容器设置了
display: grid且定义了明确的轨道（如grid-template-columns: repeat(4, 1fr)） - 至少有一个子项用了
grid-column: 2 / 4或grid-row: 3这类显式跨位，导致后面本该落位的位置出现空洞 - 后续未定位子元素的尺寸（尤其是宽度）小于当前行剩余可用列宽，且能完整放入某个已存在的空隙中
示例场景：一个四列网格中，.item-a 占前两列，.item-b 占第三列，此时第四列是空的；若下一个 .item-c 没设 grid-column，则 dense 可能把它塞进第四列，而非等第二行。
最容易被忽略的一点：dense 不生成新轨道，也不压缩内容
它只在已有轨道里“插空”。一旦容器高度受限、或子项用了 minmax() + auto 导致行高浮动，dense 就基本失效——这时候调参不如换方案。比如响应式列数变化、子项高度差异大、或依赖可访问性时，dense 不仅无效，还会让布局失控。真要填视觉空白，得靠 grid-template-areas 预留槽位，或用 JS 动态插入带 class="placeholder" 的空 。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
