CSS Grid布局问题：实现固定尺寸网格并解决item4重叠

问题描述 #

我想要实现如图所示的CSS Grid布局，整个网格宽1009px、高695px，每个网格单元格拥有精确的像素宽高，布局与尺寸完全一致，每个单元格包含图片与文字。

尝试实现后遇到的核心问题：item4布局异常，与item1发生重叠。

注：平时更多使用flexbox，对复杂Grid布局知识薄弱，但必须用Grid完成此布局。

原代码 #

CSS

.grid-container {
    display: grid;
    grid-template-columns: 276px 139px repeat(3, 195px);
    grid-template-rows: 320px repeat(2, 177px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;

    width: 1009px;
    height: 695px;
}

.item-1 {
    grid-area: 1 / 1 / 2 / 3;
}

.item-2 {
    grid-area: 1 / 3 / 2 / 6;
}

.item-3 {
    grid-area: 2 / 1 / 4 / 2;
}

.item-4 {
    grid-area: 2 / 2 / 4 / 4;
}

.item-5 {
    grid-area: 2 / 4 / 3 / 6;
    text-align: right;
}

.item-6 {
    grid-area: 3 / 4 / 4 / 6;
    text-align: right;
}

.item-1 img {
    width: 415px;
    height: 320px;
}

.item-2 img {
    width: 585px;
    height: 320px;
}

.item-3 img {
    width: 276px;
    height: 365px;
}

.item-4 img {
    width: 373px;
    height: 365px;
}

.item-5 img {
    width: 371px;
    height: 177px;
}

.item-6 img {
    width: 371px;
    height: 177px;
}

HTML

<div class="grid-container">
        <div class="item-1">
            <img src="https://nissangtr35.pl/item-1.jpg" alt="">
        </div>
        <div class="item-2">
            <img src="https://nissangtr35.pl/item-2.jpg" alt="">
        </div>
        <div class="item-3">
            <img src="https://nissangtr35.pl/item-3.jpg" alt="">
        </div>
        <div class="item-4">
            <img src="https://nissangtr35.pl/item-4.jpg" alt="">
        </div>
        <div class="item-5">
            <img src="https://nissangtr35.pl/item-5.jpg" alt="">
        </div>
        <div class="item-6">
            <img src="https://nissangtr35.pl/item-6.jpg" alt="">
        </div>
    </div>

问题原因 #

你的Grid区域定位是正确的，重叠的核心原因是图片硬编码尺寸超出了Grid单元格的实际范围：

• Item4的单元格宽度为 139px + 195px + 10px（列间距）= 344px，但你给图片设置了width: 373px，超出了29px
• Grid容器默认不限制内容溢出，所以超出的图片部分会覆盖到上方的Item1区域

修复方案 #

1. 统一图片适配规则 #

删除所有.item-x img的固定宽高，添加全局图片样式，让图片自动填充单元格：

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

• object-fit: cover确保图片按比例缩放，完全填满单元格，不会变形，超出部分自动裁剪
• 如果需要完整显示图片（允许留白），可以替换为object-fit: contain

2. 可选：添加溢出控制 #

给Grid容器添加overflow: hidden，彻底防止内容溢出容器范围：

.grid-container {
    /* 原有样式 */
    overflow: hidden;
}

修改后的完整CSS代码 #

.grid-container {
    display: grid;
    grid-template-columns: 276px 139px repeat(3, 195px);
    grid-template-rows: 320px repeat(2, 177px);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    width: 1009px;
    height: 695px;
    overflow: hidden;
}

.item-1 {
    grid-area: 1 / 1 / 2 / 3;
}

.item-2 {
    grid-area: 1 / 3 / 2 / 6;
}

.item-3 {
    grid-area: 2 / 1 / 4 / 2;
}

.item-4 {
    grid-area: 2 / 2 / 4 / 4;
}

.item-5 {
    grid-area: 2 / 4 / 3 / 6;
    text-align: right;
}

.item-6 {
    grid-area: 3 / 4 / 4 / 6;
    text-align: right;
}

.grid-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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