先记住这个答案
总览卡片手动占住第一行两列后，普通卡片不会被默认自动放置叠在这两格上，而是由自动放置游标继续找可容纳它们的空闲区域。跨列卡片要整块区域都有空位，不能只看起点一格。dense 允许后续小卡片回填早先留下的洞，但可能让视觉顺序偏离 DOM；两个手动定位到同一区域的项目仍可重叠。
- 自动项目避开已占用格子
- 跨列项目需要连续空位
dense可回填前面的洞- 显式定位项目仍可能重叠
总览卡片占两列后的排布
仪表盘中把“总览”卡片固定在第一行第一列，并让它跨两列，其他卡片自动排列。自动项目会绕开它占用的格子，继续寻找可放下自己的空位。若用 grid-auto-flow: row dense，后面的较小项目可能回填之前留下的洞，视觉顺序因此与 DOM 顺序不完全一致；交互卡片要核对键盘顺序。
.dashboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
gap: 12px;
}
.summary { grid-column: 1 / span 2; grid-row: 1; }
/* 其余未定位项目会找未占用的格子 */总览卡片占住第一行前两格，其余自动项目会寻找空闲网格单元。
自动游标寻找空闲网格单元
自动放置使用游标沿指定方向扫描可用网格单元。项目若跨多个轨道，算法需要找到整个占用区域都空着的位置，而不只是起点空着。dense 允许游标回头填洞，能提高密度，但会改变视觉排列。显式项目若超出定义好的轨道，还会生成隐式轨道；如果两个显式项目指向同一个区域，Grid 允许它们层叠，自动放置算法不会替你消除这个冲突。
还要区分“只指定了一个轴”和“两个轴都指定了”。例如一个项目固定在第二列、没有写行号，它仍要沿着第二列找可用行；不能把它当成完全自动的项目从第一列开始扫。反过来，两个项目若都写死 grid-row: 1 和 grid-column: 1，它们就是明确重叠，grid-auto-flow 无权把第二个挪走。实际调试时先给显式定位项目画出占位，再按 DOM 顺序模拟剩余项目的游标，通常比猜“Grid 会自动避让”更可靠。
在三列网格里给总览卡片写 grid-column: 1 / span 2，再放三张普通卡片，逐格标出它们的落点。把总览卡片改成同时指定第二行后，普通卡片的放置顺序会重新受已占用单元影响。这个实验比只看最终截图更能分清显式定位与自动放置。
容易答错的地方
- 说 Grid 永远不会重叠
- 自动放置会寻找空位，但显式放在同一网格区域的项目可以重叠。
- 以为
dense不影响顺序 - 它可能让后面的项目视觉上跑到前面的空位，DOM 顺序仍没变。
面试官还会怎么问？
跨两列的自动项目会怎样找位置？
它要找到连续且未被占用的两个列轨道，当前行装不下就继续扫描。
显式定位超出模板列数怎么办？
Grid 会按需要创建隐式轨道，尺寸由 grid-auto-columns 或默认规则决定。
为什么不建议对交互控件随意用 dense？
视觉顺序可能和阅读、焦点顺序分离，键盘访问容易跳跃。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。