为何CSS Grid第三列从第二行开始？附代码示例

你遇到的问题是Grid自动放置算法的默认行为导致的。默认情况下，Grid使用grid-auto-flow: row规则，会严格按照元素在DOM中的顺序依次放置，不会主动回头填充前面的空白单元格。

布局过程分析 #

你的DOM元素顺序为：黄色跨行列 → 左侧红1 → 左侧红2 → 右侧蓝1 → 右侧蓝2
Grid的具体布局步骤：

• 黄色元素先占据列2的行1-2，行1高度被拉伸至200px（匹配黄色元素的固定高度）。
• 左侧红1被放入行1的列1（第一个可用的列1单元格）。
• 左侧红2被放入行2的列1（行1列1已被占用），行2高度被拉伸至100px（匹配红2的固定高度）。
• 处理右侧蓝1时，Grid已推进到行2的处理流程，因此直接将蓝1放入行2的列3，不会回头填充行1的列3空白。
• 右侧蓝2随后被放入行3的列3，最终导致右侧元素整体向下偏移一行。

解决方法 #

方法1：让Grid自动填充空白单元格

在.example_grid中添加grid-auto-flow: row dense，Grid会自动填充之前的空白单元格：

.example_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row dense;
}

方法2：手动指定右侧元素的行位置

给右侧元素强制指定行位置，让第一个蓝元素放在行1：

.grid-right:nth-child(4) {
    grid-row: 1;
}
.grid-right:nth-child(5) {
    grid-row: 2;
}

方法3：调整DOM元素顺序

把右侧蓝元素提前，让Grid先填充行1的列3：

<div class="example_grid">
    <div class="grid-main-element grid-center"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-right"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-right"></div>
</div>

原始代码参考 #

HTML

<div class="example_grid">
    <div class="grid-main-element grid-center"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-left"></div>
    <div class="grid-element grid-right"></div>
    <div class="grid-element grid-right"></div>
</div>

CSS

.example_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 
}

.example_grid>div {
    border: 1px solid white;
}

.grid-left {
    grid-column: 1;
    background-color: red;
}

.grid-center {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    background-color: yellow;
}

.grid-right {
    grid-column: 3;
    background-color: blue;
}

.grid-element {
    height: 100px;
}

.grid-main-element {
    height: 200px;
}

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