间隙？喘不过气！

最初，有 弹性盒（display: flex 容器的子元素）。如果您希望它们在视觉上彼此分离，则必须使用内容对齐（即 justify-content: space-between）、margin 技巧，或者有时两者兼用。然后出现了 网格（一个 display: grid 容器），并且网格可以在网格单元格之间具有无边距、无技巧的最小间隙，这要归功于 grid-gap。弹性盒没有间隙。

现在它们可以有了，这要归功于 gap 的日益增长的支持，gap 是 grid-gap 的继承者，它不局限于网格。使用 gap，您可以为网格、弹性盒，甚至多个列添加间隙。太棒了！

使用网格创建间隙

让我们从 gap 最强大的地方开始：CSS 网格。以下是在 HTML 和 CSS 中的基本网格设置

<section>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
  <div>div</div>
</section>

section {
  display: grid;
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(4,auto);
  gap: 1em;
}
section div {
  width: 2em;
}

这将网格单元格彼此之间至少隔开 1em。分离距离可能大于此，具体取决于本文范围之外的其他条件，但至少应以 1em 分隔。（好的，让我们举一个例子：gap 的间隙会添加到网格单元格上的任何边距，因此，如果所有网格项都有 margin: 2px;，则网格单元格之间的视觉距离将至少为 1em 加上 4px。）默认情况下，间隙大小的更改会导致网格项的大小调整，以便它们填充其单元格。

这一切之所以有效，是因为 gap 实际上是属性 row-gap 和 column-gap 的简写。gap: 1em 被解释为 gap: 1em 1em，它是 row-gap: 1em; column-gap: 1em; 的简写。如果您希望行和列间隙距离不同，则可以使用类似 gap: 0.5em 1em 的内容。

使用弹性盒创建间隙

在弹性盒上下文中执行相同操作会为您提供间隙，但与网格中的情况略有不同。假设与上面相同的 HTML，但使用此 CSS 代替

section {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

弹性盒在此处至少会被 gap 的值推开，并且（由于 flex-wrap）在它们用完弹性容器内的空间时换行到新的弹性行。更改间隙距离可能会导致弹性项目换行方式的更改，但与网格不同，更改弹性项目之间的间隙不会更改弹性项目的大小。间隙更改可能会导致弹性换行发生在不同的位置，这意味着每行弹性项目的数量将发生变化，但宽度将保持不变（除非您已通过 flex 设置它们增长或缩小）。

使用多列创建间隙

在多列内容的情况下，gap 有一些限制：仅使用列间隙。如果您愿意，可以为多列声明行间隙，但它们将被忽略。

section {
  columns: 2;
  gap: 1em;
}

支持

对 gap、row-gap 和 column-gap 的支持令人惊讶地广泛。Mozilla 从 61 版开始就支持它们，Chromium 从 66 版开始就支持它们，并且由于 Igalia 的 Sergio Villar 的工作，它们很快就会出现在 Safari 和移动 Safari 中（它们已经出现在 技术预览版本 中）。因此，如果您的网格、弹性盒或多列内容需要更多空间来呼吸，准备好进入间隙吧！