填充行之间的大间隙

Question

在代码中box-2，box-3行高自动拉伸到box-1行中最高项目的高度。box-2和列中有额外的间隙box-3。box-5我希望这个空白由第二行中的来填补。小提琴

.container {

  display: grid;

  grid-template-columns: 20% 40% 40%;

  grid-gap: 20px;

}

.container > div {

  border: 1px solid red;

}

.box-1 {

  background-color: lightgreen;

  height: 300px;

}

.box-2 {

  background-color: lightsalmon;

  height: 150px;

}

.box-3 {

  background-color: lightsalmon;

  height: 150px;

}

.box-4 {

  background-color: lightskyblue;

  height: 500px;

}

.box-5 {

  background-color: lightseagreen;

  grid-column: 2/-1;

}

<div class="container">

  <div class="box-1"></div>

  <div class="box-2"></div>

  <div class="box-3"></div>

  <div class="box-4"></div>

  <div class="box-5"></div>

</div>

这是我正在寻找的输出

Answer 1

您直接设置网格项的高度，而不是在网格容器上定义任何行。因此，网格算法必须创建行来容纳网格区域。它只需要创建两行即可完成布局。这就是为什么框 2 和 3 下方有一个很大的间隙。框 1 最高，它设置顶行的高度。您想要的布局至少需要三行。尝试这种方法：在容器级别设置行（和高度），然后设置网格区域。.container {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 2fr 2fr;&nbsp; grid-template-rows: repeat(3, 150px);&nbsp; grid-gap: 10px;}.box-1 {&nbsp; grid-column: 1;&nbsp; grid-row: 1 / span 2;&nbsp; background-color: lightgreen;}.box-2 {&nbsp; grid-column: 2;&nbsp; grid-row: 1;&nbsp; background-color: lightsalmon;}.box-3 {&nbsp; grid-column: 3;&nbsp; grid-row: 1;&nbsp; background-color: lightsalmon;}.box-4 {&nbsp; grid-column: 2 / -1;&nbsp; grid-row: 2 / 4;&nbsp; background-color: lightskyblue;}.box-5 {&nbsp; grid-column: 1;&nbsp; grid-row: 3;&nbsp; background-color: lightseagreen;}<div class="container">&nbsp; <div class="box-1">1</div>&nbsp; <div class="box-2">2</div>&nbsp; <div class="box-3">3</div>&nbsp; <div class="box-4">4</div>&nbsp; <div class="box-5">5</div></div>如果您需要更多选项来调整网格区域的大小，请增加行/列数。例如，代替这个：grid-template-rows:&nbsp;repeat(3,&nbsp;150px)...你可以这样做：grid-template-rows:&nbsp;repeat(9,&nbsp;50px)...然后根据需要跨行跨越网格区域。

Answer 2

将盒子 1 和盒子 3 放在一个 div 中，将其垂直对齐，并将所有其他 3 个盒子放在一个容器中，放在 1 个容器中，这样你就可以轻松做到这一点