grid-auto-flow: dense 仅在三条件齐备时生效：父容器有明确轨道、存在显式定位项造成空洞、后续未定位项尺寸适配空位；缺一即无效，且不解决重叠与可访问性问题。
grid-auto-flow: dense 不是“自动填补空隙”的开关，它只在特定条件下回填已被跳过的空白单元格——漏掉任一前提，就只是多写了一行无效 CSS。
为什么加了 grid-auto-flow: dense 却没填空
根本原因通常是三个条件缺一不可，但你只写了那一行：
- 父容器必须有明确的列轨道（如
grid-template-columns: repeat(4, 1fr)），且至少部分行由grid-auto-rows或grid-template-rows定义；没有轨道，dense就无格可填 - 必须存在显式定位项（如
grid-column: 1 / 3或grid-row: 2 / 4），造成后续位置被跳过、留下物理空单元格 - 后续未定位项（即没写
grid-row/grid-column的元素）尺寸要足够小，能完整放进那个空位；若宽度超限，浏览器会跳过该空位，继续往下找
常见无效场景：所有子项都写了 grid-column；用了 grid-template-areas；只设了 grid-template-columns 却没配 grid-auto-rows；或第一项 grid-column: 1 / -1 占满整行——后面项再小也塞不进“视觉空白”，因为那不是空单元格，而是被跨列项覆盖的区域。
row dense 和 column dense 填空逻辑完全不同
方向决定“空位”怎么被识别，不能混用或凭直觉替换：
-
row dense：从左到右、从上到下扫描，只在**当前行内**找空列。适合卡片宽度较统一、高度差异不大的横向流 -
column dense：从上到下、从左到右扫描，但“找空”只发生在**当前列内部**，不会把一个项塞进左边列的空位。适合瀑布流，但窄屏易出现“左列很长、右列突然冒一个”的错觉 - 注意：
grid-auto-flow: column本身已隐含 dense 行为，单独加column dense效果不明显
容易踩的坑：dense 不解决重叠，也不保证可访问性
dense 算法只重排自动定位项，但它不校验是否与其他显式项冲突：
- 如果计算出的位置与某个
grid-column: 2 / 4项重叠，浏览器会静默丢弃该 placement，让该项 fallback 到下一个可用位置（不报错，但布局失控） - DOM 顺序和视觉顺序必然不一致——屏幕阅读器仍按 HTML 顺序读取，而用户看到的是“后写的元素出现在前面”，对语义化内容（如图集、步骤说明）是硬伤
- DevTools 的 Grid 面板能显示最终位置，但源码里找不到对应关系，协作时极易误判为样式写错
真正需要填空时，与其反复调参 minmax() 和 grid-auto-rows，不如换方案：用 column-count + break-inside: avoid 做原生多列流，兼容性好、逻辑透明、无障碍友好——dense 只应在局部、非语义、纯视觉紧凑需求中谨慎启用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
