删除网格项目时关闭网格布局中的间隙

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"），因此创建了四个显式行。这些行存在或不存在网格项。
• 解释： 由于容器创建了一个明确的网格，它不考虑网格项的存在。容器创建行和列。当这些行和列相交时，它们会创建单元格。单元格可以被占用或未被占用。
• 可以这样想： 网格行和项目之间的关系类似于轨道和火车。有或没有火车的轨道都存在。事实上，用 Grid 的说法，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>