grid-auto-flow: dense 仅对显式定位腾出的、轨道范围内的空单元格生效；需同时满足有隐式轨道、存在跨行/列导致的空洞、后续项尺寸匹配三条件才触发回填。
加了 grid-auto-flow: dense 却没填空？不是 dense 失效，而是你根本没给它“空隙”可填。
为什么 grid-auto-flow: row dense 看不到效果
最常见的误判是：以为只要写了 dense，浏览器就会自动把小卡片塞进大卡片下方的视觉空白里。实际上，dense 只对“被显式定位项腾出、且仍在当前轨道范围内的空单元格”起作用。
- 所有子元素都写了
grid-row或grid-column—— dense 完全不调度，因为没一个项是“自动放置”的 - 用了
grid-template-areas—— 区域模板已锁定每个格子归属，dense 无权插手 - 只设了
grid-template-columns，但没配grid-auto-rows或grid-template-rows—— 没有隐式行轨道，dense 就“无格可填” - 父容器轨道太少（比如只有 2 行），而显式定位项占满前两行，后续项只能溢出，dense 也救不了
row dense 和 column dense 填空逻辑完全不同
方向决定“空位”怎么被识别。别随便换值，否则视觉结果可能完全反直觉。
-
row dense：从左到右、从上到下扫描，只在**同一行内**找空列。适合宽度较统一、高度差异不大的卡片流 -
column dense：从上到下、从左到右扫描，但只在**当前列内部**找空行。不会跨列把一个项塞进左边列的空位，更适合瀑布流类垂直优先布局 - 两者都不改变 DOM 顺序，但
column dense在窄屏下容易出现“左边一长列、右边突然冒一个”的错觉；row dense更可能把所有小项挤进第一行，撑高容器高度
真正触发 dense 填空的最小必要条件
必须同时满足这三点，dense 才会开始回填：
立即学习“前端免费学习笔记（深入）”；
- 父容器有明确的轨道定义，例如
grid-template-columns: repeat(4, 1fr)，且至少存在隐式行（靠grid-auto-rows: auto或显式grid-template-rows） - 至少有一个子项用了
grid-row: 1 / 3或grid-column: 2 / 4这类跨行/跨列声明，导致其后本该落位的位置出现空洞 - 后续未定位项的尺寸（尤其是宽度）能完整放进那个空洞——比如空的是第 1 行第 3 列，而下一个项宽刚好占 1 列，它才可能被
dense塞进去
想让“空位置”有背景或边框？dense 不管这事
grid-auto-flow: dense 不生成新轨道，也不让“空”变成“可样式化”。浏览器根本不渲染不存在的格子。所谓“空白区域”，其实是视觉错觉。
- 要样式化空位，得让它物理存在：用
grid-template-areas预留槽位，比如"a b c" "d . f"，那个.就是可选中的空位 - 或者用 JS 补 DOM：
document.querySelectorAll(".grid > *").length算出缺几个，动态插入带class="placeholder"的空<div>，再统一设 <code>background: #f5f5f5; border: 1px dashed #ccc; - 别指望
grid-auto-fit或auto-fill留下可样式化的空轨道——它们会把空轨道缩成 0，视觉上就是“没了”
真正难的不是写对 dense，而是判断当前布局里有没有它能识别的“空”——那空必须是显式定位制造的、在已有轨道内的、尺寸匹配的、未被占用的单元格。其余全是幻觉。
