新元素跳入中间空位是 grid-auto-flow 默认行为所致，应选对值、配对参数、避开 dense 陷阱；推荐用 row + 显式 grid-auto-rows，或改用 column 实现追加效果。
动态增减网格项时，新元素不按你预期的“追加到末尾”，而是跳进中间空位——这不是 bug，是 grid-auto-flow 默认行为在起作用。关键不是强行“修复”它，而是选对值、配对参数、避开 dense 的陷阱。
grid-auto-flow: row 为什么不会自动“换行”到下一行末尾
grid-auto-flow: row 的默认逻辑是「按行列序填空」，不是「按 DOM 顺序追加」。它会扫描当前所有已存在的行和列，找第一个空单元格放进去——哪怕那个空位在第二行第一列，而你刚 append 的元素本该是第八个。
- 显式网格只定义了列（如
grid-template-columns: repeat(3, 1fr)），没设行数，浏览器会动态生成隐式行，但填充起点仍是逻辑上“下一个空位”，不是视觉末尾 - 只要某个子项设置了
grid-column或grid-row，就可能人为制造空洞；后续自动放置项会优先填这些洞，而不是往后堆 -
grid-template-rows: auto不影响该行为——它只控制显式行高，不干预自动放置算法
grid-auto-flow: column 是最接近“列表追加”的方案
把流向从行切到列，新增项就会严格向下填满当前列，再进下一列。视觉上就像往列表底部 push 一个新 item，没有跳格、不依赖 DOM 顺序补位。
- 必须同步设置
grid-auto-rows，否则隐式行高为auto，各列高度不一致，导致列错位或容器无限拉高 - 推荐写法：
grid-auto-rows: minmax(100px, auto)或grid-auto-rows: 100px，确保每行有明确高度基准 - 滚动方向会变成垂直，如果容器原本靠横向 overflow 滚动，现在得检查是否要改用
overflow-y: auto
grid-auto-flow: row dense 看似聪明，实则危险
row dense 允许新项回填前面留下的空洞，看起来更“紧凑”，但在动态场景中极易失控。
- 当某项跨整行（
grid-column: 1 / -1），dense 可能把它后面的新项塞进它上方的空行，直接破坏阅读流 - DOM 插入顺序和渲染顺序分离，
transition动画可能错位，屏幕阅读器抓取顺序也和视觉不符 - 每次增减都触发全网格重排，dense 算法比普通 row 复杂得多，性能开销明显上升
- 仅适用于所有项尺寸完全一致、且不依赖语义顺序的展示型布局（比如纯图库卡片）
真正可控的最小配置组合
不要只调 grid-auto-flow，它必须和隐式轨道尺寸联动才有效。以下是最小可靠写法：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: row;
}
注意：auto-fit 让列数响应容器宽度，minmax(100px, auto) 确保隐式行有最低高度又不僵死，grid-auto-flow: row 保持默认可预测性。如果仍需“追加到底部”，就换 column，别硬扛 dense。
最容易被忽略的是：grid-auto-rows 和 grid-auto-columns 必须显式声明，否则隐式轨道尺寸为 auto，所有错位问题都会回归——这不是浏览器 bug，是规范要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
