grid-auto-flow: dense 并非万能填空开关，仅当存在显式定位项（如grid-row跨行）造成空洞、后续未定位项尺寸适配空隙、且父容器已定义轨道时才生效；否则无效。
grid-auto-flow: dense 不是“自动填充空白”的万能开关，它只在存在 grid-row 或 grid-column 显式定位项、且后续项尺寸较小可塞进前面空隙时才生效。没显式定位，或所有项都按顺序流式排列，加 dense 完全没效果。
为什么加了 grid-auto-flow: dense 却没看到填空？
根本原因是：dense 算法只对“被跳过的空单元格”起作用——前提是已有某些项用了 grid-row/grid-column 跨行/跨列，导致后面本该落位的位置出现空洞。
- 如果所有子元素都没指定位置（纯
grid-template-columns+ 顺序排列），dense和row行为完全一致 - 如果某项设了
grid-row: 1 / 3，而下一项高度仅占 1 行，但默认grid-auto-flow: row会把它放在第 3 行开始；启用dense后，它可能插进第 1 行右侧剩余空位（前提是列足够） - 注意：dense 不改变已定位项的位置，只重排那些由 auto-placement 规则生成的项
grid-auto-flow: dense 的真实触发条件
必须同时满足三个条件，dense 才会真正“填空”：
- 父容器设置了
display: grid且定义了明确的轨道（如grid-template-columns: repeat(4, 1fr)） - 部分子元素使用了显式网格线定位，例如
grid-column: 2 / 4或grid-row: 3 - 后续未定位子元素的尺寸（尤其是宽度）小于当前行剩余可用列宽，且能完整放入某个已存在的空隙中
示例场景：
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-flow: dense;
}
.item-a { grid-column: 1 / 3; } /* 占前两列 */
.item-b { grid-column: 3; } /* 占第3列 */
/* 此时第4列是空的；若下一个 .item-c 没设 column，则 dense 可能把它塞进第4列，而非等第2行 */
容易踩的坑：dense 不解决重叠，也不保证视觉连续
开启 dense 后，元素 DOM 顺序和视觉顺序可能不一致，尤其当配合 grid-row-start 和内容高度不均时：
-
dense可能导致后声明的元素出现在先声明元素的左侧或上方，破坏阅读流 - 它不会避免重叠——如果计算出的位置与其他显式定位项冲突，浏览器仍按规范丢弃该 placement（不报错，但项会 fallback 到下一个可用位置）
- 在可访问性层面，屏幕阅读器仍按 DOM 顺序读取，而视觉顺序被打乱，可能造成认知断层
- 不要用它来“修复”因
grid-row写错导致的空白——先检查定位是否合理，再考虑 dense
真正难的是判断哪些空洞是 dense 能填的、哪些是布局逻辑缺陷。多数时候，空白来自轨道尺寸与内容不匹配，或显式定位过于粗放——这时候调 dense 就像用胶带缠裂缝，不如重算 grid-template-areas 或改用 grid-auto-rows 动态适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
