grid-auto-flow: dense 仅对未手动定位的自动放置项生效；若所有项均显式定位，则 dense 无效。其填空需同时满足：存在空洞、有隐式轨道、部分项放养。
grid-auto-flow: dense 不是开关式功能，它只对没写 grid-row 或 grid-column 的自动放置项起作用；加了但没效果，大概率是因为你把所有项都手动定位了。
为什么加了 grid-auto-flow: dense 还有空隙？
根本原因：dense 只参与“自动放置”过程。一旦某个元素写了 grid-row: 2 / 4 或 grid-column: 1 / -1，它就脱离了 dense 的调度范围。
- 显式定位的项（哪怕只设一个
grid-row-start）会锁死位置，dense 不会挪动它们，也不会为它们“预留”空间 - 后续自动项只能在显式项腾出的“物理空洞”里填——前提是这些空洞落在已生成的隐式轨道内
- 如果用了
grid-template-rows: 100px 100px，但某项跨了两行，dense 不会把第三行“拉上来”，它只在已有两行里找空格子 - 用
grid-template-areas定义了区域后，未命名的子元素才进入隐式网格，此时 dense 才有机会生效
真正起效的最小配置组合
要让 dense 填上空隙，必须同时满足三个条件：存在空洞 + 有隐式轨道 + 至少部分项放养。推荐这样写：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: row dense;
gap: 12px;
}
-
grid-template-columns用auto-fit或auto-fill，确保列数随容器变化，触发隐式行生成 -
grid-auto-rows必须设置（不能只靠grid-template-rows），值建议用minmax(100px, auto)或auto，让行高可变 - 子元素中至少保留几个“不写任何
grid-row/grid-column”的项，让浏览器决定初始落点 - 想让高卡片跨行？用
grid-row-end: span 2而不是grid-row: 1 / 3，前者仍属自动放置范畴，dense 可调度后者
row dense 和 column dense 的实际差异
方向不同，填空逻辑一致，但适用场景差别很大：
-
row dense：适合横向为主、内容高度不一的瀑布流，比如图片墙、卡片列表；空洞通常由高卡片在中间产生 -
column dense：适合纵向滚动长列表，比如时间轴、聊天记录；但要注意，grid-template-rows必须明确，否则隐式行太多，dense 填得不可控 - 在 RTL 布局中，
row dense仍按 LTR 顺序填空，可能导致视觉偏移，需额外测试 - 两者都会破坏 DOM 顺序与渲染顺序的一致性——屏幕阅读器按渲染位置读，
:nth-child(2)选中的可能出现在第 5 行第 1 列
最易被忽略的一点：dense 的填空行为只发生在布局计算阶段，它不会触发重排。你改了某个显式项的位置，其他自动项是否被“提上来”，取决于空洞是否还存在、是否还在已生成的轨道范围内——而不是看 dense 这行 CSS 还在不在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
