如何使用 CSS 网格创建以下布局？ [复制]

Posted 2023-03-06

【中文标题】如何使用 CSS 网格创建以下布局？ [复制]

【英文标题】：How can I use CSS grid to create the following layout? [duplicate]

【发布时间】：2022-01-22 07:06:53

【问题描述】：

我正在使用 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;

【问题讨论】：

您正在使用网格线名称，但您尚未在任何地方定义它们。

***.com/questions/42946454/…

【参考方案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>