编写响应式 2 (50%) / 3 (33%) 列 CSS 网格布局的最有效方法？

Question

我目前正在尝试使用 CSS Grid 布局一个相当简单的响应式图像网格（见图）

我正在尝试创建的 CSS 网格布局的静态图像：

第一行将显示两张图片（均为 50% 宽度），第二行将显示三张图片（每张大约为 33%）。

我对使用 Flexbox 的这种布局没有任何问题，但 CSS Grid 解决方案却让我望而却步。作为记录，我仍然在掌握 CSS Grid，所以问题可能出在我身上？这种布局可行吗？任何提示/提示将不胜感激。

Answer 1

这是一个例子。您可以使用这些单位来满足您的尺寸要求。代码在这里：

//HTML
<div class="gridcontainer">
    <div class="bigimage1"></div>
    <div class="bigimage2"></div>
    <div class="smallimage1"></div>
    <div class="smallimage2"></div>
    <div class="smallimage3"></div>
</div>

//CSS
.gridcontainer{
    background: #666;
    border: .65vw solid #666;
    display: grid;
    height: 81.75vh;
    width: 57.5vw;
    grid-gap: .7vw;
    grid-template-columns: 9vw 9vw 9vw 9vw 9vw 9vw;
    grid-template-rows: 48vh 32.5vh;
    grid-template-areas: 
    "bigimageleft bigimageleft bigimageleft bigimageright bigimageright bigimageright"
    "smallimageleft smallimageleft smallimagecenter smallimagecenter smallimageright smallimageright";
    }

.bigimage1{
    grid-area: bigimageleft;
    background: white;
    }
.bigimage2{
    grid-area: bigimageright;
    background: white;
    }
.smallimage1{
    grid-area: smallimageleft;
    background: white;
}
.smallimage2{
    grid-area: smallimagecenter;
    background: white;
}
.smallimage3{
    grid-area: smallimageright;
    background: white;
    }

在此处查看示例：https://jsfiddle.net/L5gbfv7m/11/