CSS Grid网格项重叠与移位的判定规则咨询

核心判定逻辑：显式定位 vs 自动放置 #

CSS Grid 对网格项是重叠还是移位的判定，本质取决于项的位置是手动显式指定，还是由自动放置算法分配：

1. 显式指定位置 → 强制重叠 #

当你通过以下方式明确指定网格项的位置时，不管目标区域是否已被其他项占据，浏览器都会直接将该项放到指定位置，从而产生重叠：

• 使用 grid-area 指定预定义的网格区域名称
• 使用 grid-row/grid-column 直接定义行/列的起始和结束线（比如 grid-column: 1 / span 2）
• 使用 grid-row-start/grid-row-end、grid-column-start/grid-column-end 单独设置定位线

示例代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
}

.item1 {
  grid-column: 1 / 3; /* 占据第1-2列 */
}

.item2 {
  grid-column: 2 / 4; /* 占据第2-3列，与item1重叠 */
}

这种场景下，item2 会直接覆盖在 item1 的重叠区域上，不会被移位。

2. 自动放置 → 避免重叠，自动移位 #

如果网格项没有显式指定位置，浏览器会通过自动放置算法分配位置，默认遵循 grid-auto-flow: row（按行填充）：

• 算法会优先寻找当前行/列中第一个未被占据的单元格
• 如果当前行/列没有可用空间，会自动创建新的行或列来放置该项，不会与已有的项重叠

比如你提到的 Scrimba 示例中，footer 大概率是未显式定位的自动放置项：当前面的网格项占据了 footer 默认会放置的单元格时，自动算法会把 footer 推到新的行，看起来像是被“推出网格”。

补充：如果设置 grid-auto-flow: dense，算法会尝试填充前面的空白单元格，但依然不会让自动放置的项重叠——它只会调整项的排列顺序，优先填充空隙，而非强制重叠。

额外影响因素 #

• 显式/隐式网格区分：显式网格是通过 grid-template-columns/grid-template-rows 定义的，隐式网格是自动创建的行/列。自动放置的项如果超出显式网格范围，会被放到隐式网格中，这也可能让你误以为是“被推出网格”。
• 重叠层级控制：当项重叠时，默认遵循 DOM 顺序（后面的项层级更高），可以通过 z-index 手动调整重叠的层级关系。

内容的提问来源于stack exchange，提问作者Christopher Hamill