CSS网格布局，使每个单元格都有精确的尺寸

Question

我正在尝试实现所附图像中显示的效果，其中每个网格单元将具有适当的宽度和高度（以像素为单位）并且大小和布局完全相同，其中整个网格宽 1009 像素，高 695 像素。每个单元格将包含一个图像和文本。

我尝试根据文档 (https://css-tricks.com/)、YouTube 教程和 CSS 网格生成器的帮助来实现这一点，但我面临的最大问题是 item4 是在有点不规则的布局和重叠的 item1.

我将不胜感激任何帮助或指导。

P.S：我平时用flexbox比较多，复杂布局我对grid的了解就弱很多，可惜这次我得用grid来排布。

我的代码：

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

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

Answer 1

布局本身似乎构建正确，问题可能出在图像本身。由于没有提供图像，此时可能很难调试。也许您可以尝试相应地限制每个项目的图像宽度和高度？

例子：

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

Answer 2

不使用网格可以更容易地实现这种布局。