CSS 网格具有可变高度，使其像砖石布局一样工作

Question

我正在尝试使用 css 网格布局创建砖石布局。网格中的所有项目都有可变的高度。下一行中的项目应堆叠到上一行中的项目的可用空间。我尝试使用

flex-flow: row wrap

但它不起作用。以下是我想要实现的目标。

Html 标记：

<div class="container">
  <div class="g grid-33">Item 1</div>
  <div class="g grid-66">Item 2</div>
  <div class="g grid-33">Item 3</div>
  <div class="g grid-33">Item 4</div>
  <div class="g grid-33">Item 5</div>
  <div class="g grid-66">Item 6</div>
  <div class="g grid-33">Item 7</div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 15px 0 0;
  background: #CDD6D0;
}

.g {
    background: #E16036;
    border: 4px solid #E3170A;
    border-radius: 8px;
    padding: 15px;
    color: white;
    font: 18px Arial;
    margin: 0 0 15px 15px;
    height: fit-content;
}

.grid-25 {
  width: calc(25% - 15px);
}

.grid-33 {
  width: calc(33.3333% - 15px);
}

.grid-50 {
  width: calc(50% - 15px);
}

.grid-66 {
  width: calc(66.6666% - 15px);
}

.grid-100 {
  width: calc(100% - 15px);
}

.g:nth-child(2) {
    height: 100px;
}

.g:nth-child(3) {
    height: 90px;
}

.g:nth-child(6) {
    height: 100px;
}

.g:nth-child(5) {
    height: 90px;
}

Codepen 链接

Answer 1

我能够使用网格系统使用下面的代码使用网格系统创建您的图像，正如您所暗示的，网格宽 3fr，长 8fr。

宽度

要创建 grid-33 类的宽度项目，其宽度为 1 个分数，而 grid-66 类的项目的宽度为 2 个分数

高度

在你的图片中，项目 1、4 和 7 大约是其他项目的二分之三。因此，高度设置为 2 个分数，其余设置为 3 个分数。

差距

为了保持正确的间隙，我保留了边距，因为网格间隙似乎不起作用。 为了给项目正确的高度，我将高度更改为自动，因此没有空白空间。

<div class="container">
  <div class="g grid-33">Item 1</div>
  <div class="g grid-66 g-double">Item 2</div>
  <div class="g grid-33 g-double">Item 3</div>
  <div class="g grid-33">Item 4</div>
  <div class="g grid-33 g-double">Item 5</div>
  <div class="g grid-66 g-double">Item 6</div>
  <div class="g grid-33">Item 7</div>
</div>

.container {
  display: grid; /* changed */
  padding: 15px 15px 0 0;
  background: #CDD6D0;
  
  grid-template: repeat(8, 1fr) / repeat(3, 1fr); /* added */
}

.g {
    background: #E16036;
    border: 4px solid #E3170A;
    border-radius: 8px;
    padding: 15px;
    color: white;
    font: 18px Arial;

    grid-row-end: span 2; /* added */
    grid-column-end: span 1; /* added */
    
    margin: 7.5px; /* changed */
    height: auto; /* changed */
}

.g-double { /* added */
  grid-row-end: span 3; /* added */
}

.grid-33 {
  grid-column-end: span 1; /* added */
}

.grid-66 {
  grid-column-end: span 2; /* added */
}