grid-auto-flow 默认 row 会导致新增项“跳格子”，因其按行优先填充逻辑位置而非视觉末尾，尤其在显式列数固定、行数未定义时，动态插入项会复用空缺轨道而非追加到末尾。
grid-auto-flow 默认值为什么会让新增项“跳格子”
默认 grid-auto-flow 是 row，意味着新生成的网格项会按行优先填满当前行，再换下一行。但如果你的显式网格（比如用 grid-template-columns: repeat(3, 1fr)）只定义了列数，没设行数，而内容项数量不是 3 的倍数，后续动态插入的项就会从第一行“空缺处”开始填——不是你肉眼看到的末尾，而是自动布局算法认定的下一个逻辑位置。这在 JS 动态添加 div 后特别明显：新元素可能插进第二行第一个格子，而不是追加到最后一行末尾。
常见错误现象：
– 列数固定为 3，已有 7 个子项（铺满两行后剩 1 个），再 append() 第 8 个，它却出现在第二行第 2 列，而非第三行第 1 列
– 使用 display: grid + grid-template-rows: auto 仍无法改变该行为，因为 grid-template-rows 只影响显式行，不干预自动行生成逻辑
- 根本原因：
grid-auto-flow: row会尝试复用已存在的、未被显式占据的轨道（track），尤其当有grid-row或grid-column手动设置过某些项的位置时，空位会被优先填充 - 解决方向不是调
grid-template-rows，而是切换排列策略或切断复用逻辑 - 若所有项都无手动行列定位（即完全依赖自动放置），
row和column行为差异才真正显现
grid-auto-flow: dense 真的能“填坑”吗？什么时候反而出问题
grid-auto-flow: row dense 允许自动放置的项回填之前留下的空洞，看起来像“智能补位”。但它不是万能补丁——尤其在动态增减场景下，容易引发视觉跳跃和 DOM 顺序与渲染顺序错乱。
使用场景限制很明确：
– 仅适用于所有网格项尺寸一致、且不依赖 DOM 顺序做语义或可访问性处理的情况
– 若某项设置了 grid-column: 1 / -1 跨整行，它后面插入的新项就可能被 dense 挤到它上方，破坏阅读流
-
dense不改变插入顺序，只改变布局顺序；JS 中appendChild()的 DOM 顺序仍保留，但屏幕渲染位置可能大幅前移 - 无障碍工具（如屏幕阅读器）通常按 DOM 顺序读取，布局顺序错位会导致信息传达错误
- 动画过渡难控制：一个本该“从右往左滑入”的新项，因
dense被塞进左侧空位，transition 可能直接失效或错位 - 性能隐患：每次增减都触发全网格重排，
dense算法复杂度高于普通row
用 grid-auto-flow: column 避免“跳格子”，但要小心滚动方向
把 grid-auto-flow 改成 column，新增项会严格按列向下填满，自然形成“追加到底部”的效果。这是最接近“列表式追加”直觉的方案，但代价是布局流向从水平变垂直，直接影响容器溢出和滚动行为。
- 必须同步调整
grid-template-rows：若原设计是固定高度容器（如height: 400px），需改用grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)))，否则新列会无限拉高容器 - 横向空间利用率下降：3 列网格在
row下是横铺，在column下变成竖排，用户需要滚动才能看到右侧内容 - 响应式断点需重写：媒体查询中基于列数的
repeat(4, 1fr)在column模式下实际影响的是行数，逻辑易混淆 - 如果项目本身有宽度自适应需求（如卡片宽度随容器变化），
column模式下每列宽度由grid-template-columns固定，灵活性降低
更可控的做法：放弃自动放置，用 grid-row 计算显式位置
对动态项数量不确定但又要求稳定追加行为的场景，与其依赖自动算法，不如用 JS 计算 grid-row 值并显式设置。这样布局完全可预测，也绕开 auto-flow 的所有歧义。
示例逻辑（假设每行 3 列）：
const index = newItemIndex; // 从 0 开始计数<br>newItem.style.gridRow = Math.floor(index / 3) + 1;
配合 grid-template-rows: repeat(auto-fill, minmax(120px, 1fr)))，即可实现稳定逐行追加。
- 注意 CSS 中
grid-row的起始值是 1，不是 0；JS 计算时别漏 +1 - 删除项后需重新计算后续所有项的
grid-row，否则会出现重叠或空洞 - 若使用虚拟滚动或大量项，避免频繁操作
style.gridRow，改用 CSS 自定义属性 +grid-row: calc(var(--row) / 1)更高效 - 此法与
grid-auto-flow完全解耦，即使设为row或column都不影响结果
最易被忽略的一点：当网格容器设置了 grid-auto-rows 且值为 auto 时，显式设置的 grid-row 仍可能因内容撑高而影响后续行位置——此时应统一用 minmax(120px, max-content) 控制行高基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
