grid-auto-flow: dense仅对未显式定位的项生效，通过回填已有轨道中的空洞来优化空间利用，不改变dom顺序、不生成新轨道、不响应式重排。
grid-auto-flow: dense 会改变视觉顺序，但不改变 DOM 顺序
它不是“打乱”，而是明确启用一种回填式放置算法：浏览器在自动分配位置时，会跳过已占用格子，回头查找前面轨道中未被占用的空位，并把后续项塞进去。DOM 结构、tabindex、屏幕阅读器读取顺序、:nth-child() 选择器匹配，全部维持原始 HTML 顺序——只有渲染出来的视觉位置变了。
常见错误现象包括：screen reader 读第 2 个元素时，眼睛看到的是第 5 个卡片；按 Tab 键焦点跳到右下角，而上一个可聚焦项在左上角；:nth-child(3) 的样式出现在第一行第二列，但 :nth-child(2) 却在第三行第一列。
什么情况下 dense 才真正生效？
grid-auto-flow: dense 只对**未显式定位**的网格项起作用。只要子元素写了以下任一声明，dense 就完全失效：
-
grid-row或grid-column（哪怕只写起点） grid-area- 出现在
grid-template-areas定义的区域中
也就是说，如果你给所有卡片都加了 grid-column: 1 / -1 或类似固定位置规则，那无论怎么设 dense，布局都不会变——因为根本没触发自动放置逻辑。
为什么开了 dense 还是看不出效果？
最常被忽略的三个前提条件：
- 必须有「空洞」存在：比如某项设置了
grid-column: span 2，导致同一行右侧留出一个空格，dense 才有机会把后面的小项插进去 - 必须有足够多的隐式轨道：仅靠
grid-template-columns定义列数不够，还得靠grid-auto-rows或grid-template-rows提供至少两行以上的可用空间，否则没地方可填 - 容器不能截断渲染：如果父容器设了
max-height或overflow: hidden，导致部分隐式行没被渲染出来，dense 就只能在“可见轨道”里找空位，看不见的空位不算数
dense 模式下的流向差异容易被误判
grid-auto-flow: row dense 和 grid-auto-flow: column dense 的“填空方向”完全不同：
-
row dense：逐行扫描，每行从左到右找空位；适合希望首屏内容尽量靠上的横向主布局 -
column dense：逐列扫描，每列从上到下找空位；但若项高度差异大，视觉上容易出现跳跃感，比如第 4 个项突然出现在第一列第二行，而第二列还空着
注意：dense 不改变流向本身，只是让该流向下的自动放置算法启用“回头补漏”。你不能指望它把 column 流向变成看起来像 row 流向的效果。
grid-template-columns），dense 的填空结果就可能完全不可预测。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
