如何让div根据css中的网格行和网格列调整大小？

Question

我想为图片库创建一个网格，但是当我使用 grid-row 和 grid-column 属性来设置定义网格容器中元素的区域时，使它们在垂直或水平方向占据两个正方形。它释放了空间，但网格本身仍保留在一个正方形中。 PS：grid-row-start/end 和 grid-column-start/end 给出相同的结果。

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;
}

蓝色矩形的图片显示了我想要的，红色矩形的图片显示了我得到的

哇，我得到的是蓝色矩形的布局，而不是红色矩形的布局吗？