如何在垂直方向上实现多个元素的网格行？

Question

我有一个两列网格布局，其中包含高度为 X 和 2X 的框（fiddle，下面的屏幕截图）

第二个盒子下面有空的 space，空的 space 足以装下盒子 3：

我想知道是否可以将卡片 3 放在那个空位中 space（让卡片 4 代替卡片 3，让卡片 5 代替卡片 4）

我用 flex 尝试过这种布局，但我遇到了同样的情况。

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  border: 2px solid black;
  padding: 1em;
  height: 50px;
}

.bigbox {
  border: 1px solid black;
  padding: 1em;
  background: red;
  height: 150px;
}

<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>

Answer 1

不要在网格项目本身上设置高度。

在容器级别使用 grid-auto-rows，然后在网格区域使用 span。

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px; /* new */
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  grid-row: span 1; /* new */
  border: 2px solid black;
  padding: 1em;
}

.bigbox {
  grid-row: span 3; /* new */
  border: 1px solid black;
  padding: 1em;
  background: red;
}

<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>

如何在垂直方向上实现多个元素的网格行？

How to achieve grid row with more than one element vertically?

html

css

grid-layout

css-grid