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

Question

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

第二个盒子下面是空的，足够放第三个盒子:

我想知道是否可以将卡片 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>