如何通过CSS的grid-row与grid-column实现网格元素行列跨区？

我想要创建一个图片画廊网格，使用CSS的grid-row和grid-column属性定义网格容器内元素的区域，希望元素能垂直或水平跨占两个网格单元，但目前仅空出对应空间，元素仍只占一个单元。使用grid-row-start/grid-row-end和grid-column-start/grid-column-end属性也得到相同结果。

我期望实现的布局为：

• 元素1垂直跨占第1、2行，第1列
• 元素2水平跨占第1行，第2、3列
• 元素3垂直跨占第2、3、4行，第2列
• 元素4垂直跨占第3、4行，第1列
• 元素5垂直跨占第2、3行，第3列
• 元素6占第4行，第3列

原始代码 #

HTML #

<div id="gallery_pics">
    <div class="gallery_pic">1</div>
    <div class="gallery_pic">2</div>
    <div class="gallery_pic">3</div>
    <div class="gallery_pic">4</div>
    <div class="gallery_pic">5</div>
    <div class="gallery_pic">6</div>
</div>

CSS #

#gallery_pics{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-rows: repeat(4, minmax(300px, 1fr));
    gap: 10px;
}
.gallery_pic{
    width: 100%;
    min-height: 300px;
    border: 1px black solid;
    background-color: rgb(142, 142, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.gallery_pic:nth-child(1){
    grid-row: 1/2;
    grid-column: 1/1;
}
.gallery_pic:nth-child(2){
    grid-row: 1/1;
    grid-column: 2/3;
}
.gallery_pic:nth-child(3){
    grid-row: 2/2;
    grid-column: 2/3;
}
.gallery_pic:nth-child(4){
    grid-row: 3/3;
    grid-column: 1/2;
}
.gallery_pic:nth-child(5){
    grid-row: 4/4;
    grid-column: 1/2;
}
.gallery_pic:nth-child(6){
    grid-row: 3/4;
    grid-column: 3/3;
}

问题出在对Grid布局网格线编号的理解错误：grid-row: a/b 表示元素从第a条网格线开始，到第b条网格线结束，两者的差值就是跨占的单元数。如果差值为1（比如1/2），元素仅占1个单元；差值为2时（比如1/3），才会跨占2个单元。另外，grid-row:1/1这类起始线与结束线相同的写法是无效的，浏览器会忽略并按默认规则排列元素。

以下是修正后的CSS代码：

#gallery_pics{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-rows: repeat(4, minmax(300px, 1fr));
    gap: 10px;
}
.gallery_pic{
    width: 100%;
    min-height: 300px;
    border: 1px black solid;
    background-color: rgb(142, 142, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 元素1：垂直跨第1-2行，第1列 */
.gallery_pic:nth-child(1){
    grid-row: 1/3;
    grid-column: 1/2;
}
/* 元素2：水平跨第1行，第2-3列 */
.gallery_pic:nth-child(2){
    grid-row: 1/2;
    grid-column: 2/4;
}
/* 元素3：垂直跨第2-4行，第2列 */
.gallery_pic:nth-child(3){
    grid-row: 2/5;
    grid-column: 2/3;
}
/* 元素4：垂直跨第3-4行，第1列 */
.gallery_pic:nth-child(4){
    grid-row: 3/5;
    grid-column: 1/2;
}
/* 元素5：垂直跨第2-3行，第3列 */
.gallery_pic:nth-child(5){
    grid-row: 2/4;
    grid-column: 3/4;
}
/* 元素6：占第4行，第3列 */
.gallery_pic:nth-child(6){
    grid-row: 4/5;
    grid-column: 3/4;
}

关键修正说明 #

• 跨2个行单元：使用grid-row: 起始线/起始线+2（例如1/3表示从第1条线到第3条线，覆盖2个行单元）
• 跨2个列单元：使用grid-column: 起始线/起始线+2（例如2/4表示从第2条线到第4条线，覆盖2个列单元）
• 避免使用起始线与结束线相同的无效取值，确保结束线编号大于起始线，差值对应目标跨占的单元数

内容的提问来源于Stack Exchange，提问作者Carlhensky Renauld Govain