我试图实现所附图像中显示的效果，其中每个网格单元格将有适当的宽度和高度的像素，并将完全相同的大小和布局，其中整个网格是1009px宽和695px高。每个单元格将包含一个图像和文本。
enter image description here
我尝试过基于文档（https://css-tricks.com/）、YouTube教程以及CSS网格生成器的帮助来实现这一点，但我面临的最大问题是item4的布局有点不规则，并且与item1重叠。

• P.S：我通常更多地使用flexbox，当涉及到复杂的布局时，我的网格知识要弱得多，但不幸的是，在这种情况下，我必须使用网格来安排一切。*

我的代码：

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