填补行间的大间隙

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 {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px;
}

.box-1 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: lightgreen;
}

.box-2 {
  grid-column: 2;
  grid-row: 1;
  background-color: lightsalmon;
}

.box-3 {
  grid-column: 3;
  grid-row: 1;
  background-color: lightsalmon;
}

.box-4 {
  grid-column: 2 / -1;
  grid-row: 2 / 4;
  background-color: lightskyblue;
}

.box-5 {
  grid-column: 1;
  grid-row: 3;
  background-color: lightseagreen;
}

<div class="container">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
  <div class="box-5">5</div>
</div>

​

如果希望更多选项用于调整网格区域的大小，则增加行/列数。

例如，而不是这样：

grid-template-rows: repeat(3, 150px)

...you可以这样做：

grid-template-rows: repeat(9, 50px)

..。然后根据需要跨行跨越网格区域。

Answer 2

将方框1和方框3垂直对齐，并将所有其他3箱放在一个容器中，这样你就可以很容易地做到这一点。