为什么CSS Grid中auto-placement会把元素放到意外位置？

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 模式就会主动去填这些坑。

1. 别指望 grid-template-rows: auto 能改行为——它只影响显式行，不干预自动行生成逻辑
2. 若想严格按 DOM 顺序从上到下、从左到右追加，改用 grid-auto-flow: row dense，但要小心重叠风险
3. 更可控的做法是：用 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 就会把它们叠在一起。

1. 打开 DevTools → Layout 面板，勾选 “Grid overlay”，能直接看到哪些单元格被多层覆盖
2. grid-area 名称重复、grid-column-start/end 写反（如 grid-column: 3 / 1）、或漏写 grid-row 都会导致 dense 模式误判空位
3. 除非你明确需要瀑布流式填充（如 Masonry 效果），否则别开 dense；日常列表、卡片墙一律用 row 或 column

手动定位项留下“坑”，auto-placement 会悄悄填进去

当你给某个网格项设了 grid-row: 2 / 4，它占了两行，但第 3 行第 2 列可能因此空出一个格子。后续用 auto-placement 插入的新项，如果尺寸刚好匹配这个空位，grid-auto-flow: row 就会把它塞进去——而你根本没在 HTML 里写这个位置关系。

1. 这种“坑”在响应式断点切换后尤其明显：小屏下某项跨两行，大屏变单行，空位就突然出现
2. 用 display: contents 替代 display: none 占位，能让该项不渲染但保留网格轨道占位能力
3. 检查 computed styles 里的 grid-row-start 和 grid-row-end，确认是否真被应用；CSS-in-JS 库有时会因层叠顺序覆盖掉你的定位声明

隐式行高度塌陷，让“填坑”行为更难察觉

新元素掉进隐式行轨道后，如果 grid-auto-rows 没设或设为 auto，浏览器会在内容加载前把它压成高度为 0，等图片/字体一到位才猛撑开——这时你看到的“错位”，其实是整行突然下移，旁边格子跟着抖，而不是位置真错了。

1. 必须显式声明 grid-auto-rows: minmax(48px, auto)：48px 是安全底线，覆盖常见字号+行高+内边距
2. 禁用 grid-auto-rows: 60px 这类固定值——文字超长会被裁剪，字体缩放后直接溢出
3. 若容器有固定高度（如 height: 600px），可用 grid-auto-rows: 1fr，但得同步确保 grid-auto-flow: row，否则 dense 会让空行抢占空间

关键点在于：auto-placement 不是随机行为，它严格遵循规范定义的填充算法；所谓“意外”，往往是显式定位与自动流混用时，对“空位”的理解出现了偏差。真正难调试的，是那些没显式设 grid-row 却因父容器 transform 或 filter 导致 containing block 改变，进而让 auto-placement 参考系偏移的情况——这种得靠 DevTools 的 Layout 面板逐层看 Containing Block 才能揪出来。