时间戳

首页 > 解决方案 > 填充行之间的大间隙

html - 填充行之间的大间隙

问题描述

在代码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>

这是我正在寻找的输出

这是我正在寻找的输出

标签： htmlcsscss-grid

解决方案

您直接设置网格项的高度，而不是在网格容器上定义任何行。因此，网格算法必须创建行来容纳网格区域。它只需要创建两行即可完成布局。这就是框 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)

...你可以这样做：

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

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

推荐阅读