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

Question

我目前正在尝试使用 CSS 网格（见图）

来布置一个相当简单的响应式图像网格

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

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

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

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/

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

Most efficient way to code a responsive 2 (50%) / 3 (33%) column CSS-grid layout?

css

grid-layout