如何删除CSS网格中列高的自动拉伸

Question

在代码box-2和box-3中，列的高度自动伸展到该行中最高的列box-1的高度。 box-2和box-3列中还有一个额外的间隙，我希望该间隙由第二行中的box-5填充。 Fiddle

这是我正在寻找的输出

HTML

<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>

CSS

.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;
}

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>

Answer 2

将第一个格中的第1个框和第3个框保持垂直对齐，并将所有其他3个框保持在一个容器中的1个容器中，那么您可以轻松地做到这一点

Answer 3

[这是一个小解决方案：将grid-template-areas添加到所需的表单中，然后设置grid-template-rows: auto auto auto;，以完全采用您在grid-template-areas中设置的内容，并且不要忘了提供grid-area对于每个框，这是解决方案：=> https://jsfiddle.net/j4k9rw3t/

HTML：

<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>

CSS：

.container {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  grid-gap: 20px;
  grid-template-rows: auto auto auto; // important to get the rows streched
  grid-template-areas:   // set the order with rowspan that you want
    "box-1 box-2 box-3"
    "box-1 box-5 box-5"
    "box-4 box-5 box-5";
}

.container>div {
  border: 1px solid red;
}

.box-1 {
  background-color: lightgreen;
  height: 300px;
  grid-area: box-1;  // add the grid area name
}

.box-2 {
  background-color: lightsalmon;
  height: 150px;
  grid-area: box-2;  // add the grid area name
}

.box-3 {
  background-color: lightsalmon;
  height: 150px;
  grid-area: box-3;  // add the grid area name  
}

.box-4 {
  background-color: lightskyblue;
  height: 500px;
  grid-area: box-4;  // add the grid area name

}

.box-5 {
  background-color: lightseagreen;
  grid-area: box-5;  // add the grid area name
}

结果将如下所示：

请注意，您所做的与我所做的结构之间存在一个差异，在我的情况下，我使用3行而不是2行！