grid-auto-flow: row 默认“填空”而非追加，会复用已有空轨道导致视觉错位；dense 模式更激进“见缝插针”，但易引发重叠，需谨慎使用。
grid-auto-flow: row 默认填空位，不是追加到末尾
动态插入新元素时位置“跳格子”，不是 JS 插入顺序错了，而是 grid-auto-flow: row（默认值）优先复用已有空轨道。比如三列布局已有 7 项（两行 + 一格），第 8 项不会出现在第三行第一列，而是塞进第二行那个空位里——视觉上就是错位。
显式网格只定义了列（如 grid-template-columns: repeat(3, 1fr)），没设行数，浏览器就靠自动行生成规则补位；而手动用 grid-row 或 grid-column 定位过的项会留下“坑”，row 模式就会主动去填这些坑。
- 别指望
grid-template-rows: auto能改行为——它只影响显式行，不干预自动行生成逻辑 - 若想严格按 DOM 顺序从上到下、从左到右追加，改用
grid-auto-flow: row dense，但要小心重叠风险 - 更可控的做法是：用
grid-row: -1+grid-column: 1 / -1把新项强制插到最后一行，再配合grid-auto-rows: minmax(48px, auto)防塌陷
grid-auto-flow: dense 真的会重叠，而且不报错
grid-auto-flow: dense 的作用是“见缝插针”，但它不会检查目标位置是否已被其他项占据——只要该单元格当前为空（哪怕只是暂时被占位符撑开），它就敢往里塞。一旦多个项共享同一区域定义（比如都写了 grid-area: "main" 但 grid-template-areas 只定义了一个 main），dense 就会把它们叠在一起。
- 打开 DevTools → Layout 面板，勾选 “Grid overlay”，能直接看到哪些单元格被多层覆盖
-
grid-area名称重复、grid-column-start/end写反（如grid-column: 3 / 1）、或漏写grid-row都会导致 dense 模式误判空位 - 除非你明确需要瀑布流式填充（如 Masonry 效果），否则别开
dense；日常列表、卡片墙一律用row或column
手动定位项留下“坑”，auto-placement 会悄悄填进去
当你给某个网格项设了 grid-row: 2 / 4，它占了两行，但第 3 行第 2 列可能因此空出一个格子。后续用 auto-placement 插入的新项，如果尺寸刚好匹配这个空位，grid-auto-flow: row 就会把它塞进去——而你根本没在 HTML 里写这个位置关系。
- 这种“坑”在响应式断点切换后尤其明显：小屏下某项跨两行，大屏变单行，空位就突然出现
- 用
display: contents替代display: none占位，能让该项不渲染但保留网格轨道占位能力 - 检查 computed styles 里的
grid-row-start和grid-row-end，确认是否真被应用；CSS-in-JS 库有时会因层叠顺序覆盖掉你的定位声明
隐式行高度塌陷，让“填坑”行为更难察觉
新元素掉进隐式行轨道后，如果 grid-auto-rows 没设或设为 auto，浏览器会在内容加载前把它压成高度为 0，等图片/字体一到位才猛撑开——这时你看到的“错位”，其实是整行突然下移，旁边格子跟着抖，而不是位置真错了。
- 必须显式声明
grid-auto-rows: minmax(48px, auto)：48px 是安全底线，覆盖常见字号+行高+内边距 - 禁用
grid-auto-rows: 60px这类固定值——文字超长会被裁剪，字体缩放后直接溢出 - 若容器有固定高度（如
height: 600px），可用grid-auto-rows: 1fr，但得同步确保grid-auto-flow: row，否则dense会让空行抢占空间
grid-row 却因父容器 transform 或 filter 导致 containing block 改变，进而让 auto-placement 参考系偏移的情况——这种得靠 DevTools 的 Layout 面板逐层看 Containing Block 才能揪出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
