关于Grid布局图片间存在巨大间隙的问题求助

问题描述 #

我正在学习Grid容器，创建了一个布局：左侧1张垂直拉伸的图片，顶部和底部分别放置2张图片。布局结构符合预期，但图片之间存在巨大间隙，调整甚至移除grid-gap都无效。

问题代码 #

CSS代码 #

.PopDestination-Header{
    text-align: center;
    margin: 100px;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
.grid-item-1 {
    grid-column: 1/2;
    grid-row: 1/3;
}
.grid-item-2 {
    grid-column: 2/3;
    grid-row: 1/2;
}
.grid-item-3 {
    grid-column: 3/4;
    grid-row: 1/2;
}
.grid-item-4 {
    grid-column: 2/3;
    grid-row: 3/4;
}
.grid-item-5 {
    grid-column: 3/4;
    grid-row: 3/4;
}

HTML代码 #

<section class="PopularDestination">
    <div class="PopDestination-Header">
        <h1>Popular Destination</h1>
    </div>
    <div class="grid-container">
        <div class="grid-item-1"><img src="Images/meric-dagli-CK_MX9mBGRo-unsplash.jpg" height="700" width="350"></div>
        <div class="grid-item-2"><img src="Images/doug-watanabe-9uiUGnGeeUo-unsplash.jpg" height="350" width="500"></div>
        <div class="grid-item-3"><img src="Images/ryan-stone-VnZMKbXrA0I-unsplash.jpg" height="350" width="500"></div>
        <div class="grid-item-4"><img src="Images/clay-elliot-3xJAVC07AYk-unsplash.jpg" height="350" width="500"></div>
        <div class="grid-item-5"><img src="Images/mike-dierken-KmA5OdUkAj8-unsplash.jpg" height="350" width="500"></div>
    </div>
</section>

问题原因 #

1. 多余的网格行：设置了grid-template-rows: repeat(4, 1fr)，但实际只用到第1、3行，第2、4行是空的，且1fr会均分容器高度，导致空行占据大量空间形成间隙。
2. 图片固定尺寸：图片使用固定height和width，与网格列的1fr布局冲突，无法自适应网格容器，加剧布局错位。

解决步骤 #

1. 修正网格行定义 #

将网格行从4行改为2行，用auto让行高自动适配内容：

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto; /* 仅保留2行，行高自适应 */
    gap: 0; /* 可根据需求调整间隙，默认0 */
}

2. 调整网格项的行跨度 #

对应修改网格项的行范围，让左侧图片占据2行，右侧图片分别对应第1、2行：

.grid-item-1 {
    grid-column: 1/2;
    grid-row: 1/3; /* 占据整个2行高度 */
}
.grid-item-2 {
    grid-column: 2/3;
    grid-row: 1/2; /* 第1行 */
}
.grid-item-3 {
    grid-column: 3/4;
    grid-row: 1/2; /* 第1行 */
}
.grid-item-4 {
    grid-column: 2/3;
    grid-row: 2/3; /* 第2行 */
}
.grid-item-5 {
    grid-column: 3/4;
    grid-row: 2/3; /* 第2行 */
}

3. 让图片自适应网格容器 #

移除图片固定宽高，设置图片填充网格项并保持比例：

.grid-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，裁剪溢出部分 */
}

完整修正后代码 #

CSS #

.PopDestination-Header{
    text-align: center;
    margin: 100px;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
}
.grid-item-1 {
    grid-column: 1/2;
    grid-row: 1/3;
}
.grid-item-2 {
    grid-column: 2/3;
    grid-row: 1/2;
}
.grid-item-3 {
    grid-column: 3/4;
    grid-row: 1/2;
}
.grid-item-4 {
    grid-column: 2/3;
    grid-row: 2/3;
}
.grid-item-5 {
    grid-column: 3/4;
    grid-row: 2/3;
}
.grid-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML #

<section class="PopularDestination">
    <div class="PopDestination-Header">
        <h1>Popular Destination</h1>
    </div>
    <div class="grid-container">
        <div class="grid-item-1"><img src="Images/meric-dagli-CK_MX9mBGRo-unsplash.jpg"></div>
        <div class="grid-item-2"><img src="Images/doug-watanabe-9uiUGnGeeUo-unsplash.jpg"></div>
        <div class="grid-item-3"><img src="Images/ryan-stone-VnZMKbXrA0I-unsplash.jpg"></div>
        <div class="grid-item-4"><img src="Images/clay-elliot-3xJAVC07AYk-unsplash.jpg"></div>
        <div class="grid-item-5"><img src="Images/mike-dierken-KmA5OdUkAj8-unsplash.jpg"></div>
    </div>
</section>

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