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

Question

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

第二个方框下面有一个空白空间，足够用于第3个方框的空间

我想知道是否有可能将卡3放置在该空白区域（卡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>