grid-row-start/grid-row-end为何错误将Item #2置于第一列？

核心原因 #

你遇到的现象是Grid布局的自动放置规则导致的：带有显式位置约束（比如grid-row-start/end）的网格项会被优先处理，且算法会从网格的第一列开始搜索第一个能容纳该元素的空位，而非保留它在HTML中的原始列位置。

具体拆解：

• 当你给Item #2设置grid-row-start: 1; grid-row-end: 3时，它属于带显式行位置约束的元素，Grid会优先处理这类元素，跳过无显式约束的Item #1。
• 算法会在网格中找第一个能容纳2行高、1列宽元素的空位，也就是第一列的第1-2行（此时还没处理Item #1，该位置是空的），所以Item #2被放在第一列。
• 之后处理无显式约束的Item #1，它会被自动放到下一个可用空位——第二列第1行，这就出现了你看到的Item #2“跑”到第一列的情况。

而给Item #1设置同样规则时，Item #1作为优先处理的元素会占据第一列第1-2行，Item #2则按原始顺序被放到第二列，符合你的预期。

解决方案 #

要让Item #2留在第二列并占据两行，只需显式指定它的列位置即可：

.container-grid-example :nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 2; /* 固定列位置为第二列 */
}

完整代码示例 #

CSS

.container {
    border: 1px dashed red;
}

.item-grid {
    background-color: rgba(255, 0, 200, .2);
    border: 1px solid green;
    padding: 1rem;
}

.container-grid-example {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    width: 50%;
}

.container-grid-example :nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 2;
}

HTML

<div class="container container-grid-example">
    <div class="item-grid">1</div>
    <div class="item-grid">2</div>
    <div class="item-grid">3</div>  
    <div class="item-grid">4</div>
    <div class="item-grid">5</div>
    <div class="item-grid">6</div>
    <div class="item-grid">7</div>
    <div class="item-grid">8</div>  
</div>

内容的提问来源于stack exchange，提问作者gene b.