CSS网格:如果区域为空，忽略网格间隙

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

**html**
    <div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
</div>

**css**
.container {


 display: grid;
  grid-template-columns: 1fr 1fr 200px;


 grid-template-rows: auto;
}

.item {
background: hsl(162, 76%, 32%);
  padding: 1rem;
}