删除网格项目时缩小网格布局中的间隙

Question

有没有一种方法可以使用具有网格间隙和缺少网格区域的网格布局，而不会在布局中留下额外的间隙。

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'a' 'b' 'c' 'd'; 
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

<div class="main">
  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>
</div>

您会看到，当布局中不存在C时，B和D之间存在间隙。

除了更改为Flex布局（非网格显示）以外，还有什么方法可以避免这种情况？

谢谢， 斯里坎特

Answer 1

答案是肯定的。删除grid-template-areas及其相关的grid-area规则。

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/

<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

使用grid-template-areas创建网格时，请牢记以下几点：

• grid-template-areas创建一个explicit grid。
• 为每个字符串值创建一行。由于您有四个字符串（"a"，"b"，"c"，"d"），因此将创建四个显式行。这些行存在或不存在网格项。
• 说明：容器创建显式网格时，它不考虑网格项目的存在。容器创建行和列。当这些行和列相交时，它们将创建单元格。单元可以被占用或未被占用。
• 这样想：网格行和项目之间的关系类似于轨道和火车。轨道存在有或没有火车。实际上，按照网格的说法，columns and rows are known as "tracks"。轨道只是基础设施。

因此，最好的选择是从使用grid-template-areas和/或grid-template-rows定义的显式行切换到隐式行，从而允许网格算法创建行轨道以容纳物品。

如果您从规则集中删除grid-template-areas和grid-area，则网格将自动将网格项布置在单列中（如您所定义），并且没有理由跳过行/留下空白。这是上面的代码：

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/

<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

如果您不希望网格项目消耗所有可用空间，请使用align-content: start，它会覆盖默认的align-content: stretch：

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  align-content: start; /* new */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/

<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

最后，如果您希望每个隐式行都具有一定的高度，请使用grid-auto-rows：

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  align-content: start; /* new */
  grid-auto-rows: 40px; /* new */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/

<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

Answer 2

如果您删除了grid-template-areas，则可以立即使用

.container {
  display: inline-grid;
  grid-template-columns: 1fr;
  width: 200px;
  grid-gap: 10px;
  margin: 1em;
}

.a,
.b,
.c,
.d {
  border: 1px solid black;
  width: 200px;
}

<div class="main">
  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>
</div>