如果某个区域为空，如何使网格忽略网格间隙？

Question

我有一个简单的网格布局，带有网格间隙和定义的网格区域。然而，并非所有区域始终都有内容。如果一个区域没有内容，我不希望项目之间有双倍的间隙。有没有办法忽略空白区域的间隙，而不使用不同的网格模板，以忽略项目之间的双重间隙？

例子：

.grid {
  display: grid;
  grid-template-areas: "area-1" "empty-area" "area-3" "area-4";
  grid-template-columns: auto;
  grid-gap: 20px;
}

.area-1 {
  grid-area: area-1;
  background: red;
}

.area-3 {
  grid-area: area-3;
  background: green;
}

.area-4 {
  grid-area: area-4;
  background: blue;
}

<div class="grid">
  <div class="area-1">Hello</div>
  <!-- empty area is missing -->
  <div class="area-3">World</div>
  <div class="area-4">!</div>
</div>

Answer 1

简而言之：不。在像这样预定义网格区域时，您不能忽略间隙。

最适合您提供的代码片段的是使用grid-template-rows属性而不是grid-template-areas

.grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, 1.2rem);
  grid-gap: 20px;
}

.area-1 {
  background: red;
}

.area-3 {
  background: green;
}

.area-4 {
  background: blue;
}

<div class="grid">
  <div class="area-1">Hello</div>
  <!-- empty area is missing -->
  <div class="area-3">World</div>
  <div class="area-4">!</div>
</div>