如何使用 CSS 网格创建以下布局？

Question

我正在使用 CSS 网格拼贴三张图片。但是，我无法在需要的地方获得最后两个较小的图像。目前，在浏览器中，两个小图像位于第一个大图像之上。欢迎任何帮助。

在CSS我有：

[![enter image description here][1]][1].collage {
    float: left;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns:1fr 1fr;
    grid-template-columns:1fr 1fr;
    gap: 10px;
}
.collage__img:first-child {
      grid-row-start: row1-start;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: 1;
}
.collage__img:nth-child(2){
     grid-row-start: row1-start;
     grid-row-end: 1;
     grid-column-start: 2;
     grid-column-end: 2;
}
.collage__img:nth-child(3){
    grid-row-start: row2-start;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 2;
}

Answer 1

.container{
    display: grid;
    gap: 10px;  
    grid-template-columns: 1fr 1fr
}
.container div {
    background: red;    
}
.container .item1{
    grid-row: 1 / span 2    
}

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

如何使用 CSS 网格创建以下布局？

How can I use CSS grid to create the following layout?

css

sass

css-grid