如何处理 CSS Grid 中多余的空白格

CSS Grid 是一种强大的布局系统，它允许我们以一种高效的方式创建复杂的页面布局。然而，在使用 CSS Grid 进行布局时，我们有时会遇到多余的空白格问题，这些空白格可能会破坏我们的布局并浪费空间。在本文中，我们将介绍如何处理 CSS Grid 中的多余空白格。

问题描述

在 CSS Grid 中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的布局方式。这些属性的值可以是像素值、百分比值或者 auto 关键字。

例如，下面这段代码定义了一个简单的 3x3 网格布局：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

上述代码将一个 display: grid 的盒子划分为了 3 列和 3 行。每一列都是 1fr 的宽度，每一行都是 100px 的高度。这样，我们就可以在网格中放置元素了。

然而，有时候我们会发现，在使用 CSS Grid 进行布局时，会出现一些多余的空白格，如下图所示：

这些空白格会影响我们布局的美观度，并且会占用网格的空间，导致网格布局不够紧凑。因此，我们需要找到一种解决多余空白格问题的方法。

解决方法

方法一：使用 grid-gap 属性

CSS Grid 中有一个很方便的属性叫做 grid-gap，它允许我们在网格中设置间距。如果设置了 grid-gap，那么网格中的所有空白格都会被填充上这个间距。例如，我们可以将上面的代码修改为：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}

加上 grid-gap: 10px 后，网格中的所有空白格都会被填充上 10px 的间距，如下图所示：

可以看到，所有的空白格都被填充了 10px 的间距，网格变得更加紧凑了。

方法二：使用 grid-auto-flow 属性

CSS Grid 中的另一个属性叫做 grid-auto-flow，它用于指定将网格填充满时，如何安排网格项。默认情况下，grid-auto-flow 的值是 row，表示按行从左到右填充网格。如果将 grid-auto-flow 的值改为 dense，则会尽可能地填充多余的空白格。例如，我们可以将上面的代码修改为：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: dense;
}

加上 grid-auto-flow: dense 后，网格中的所有空白格都会被尽可能地填充，如下图所示：

可以看到，多余的空白格被填充了，网格变得更加紧凑了。

方法三：使用 repeat() 函数

CSS Grid 中的 repeat() 函数可以让我们更加简洁地定义网格的布局。例如，我们可以将上面的代码修改为：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

repeat() 函数的第一个参数是重复项的数量，第二个参数是重复项的类型。上述代码与之前的代码等效，但更加简洁清晰。

总结

本文介绍了如何处理 CSS Grid 中的多余空白格，主要介绍了三种解决方法：使用 grid-gap 属性、使用 grid-auto-flow 属性和使用 repeat() 函数。这些方法都可以有效地解决多余空白格问题，并使网格布局变得更加紧凑。在实际开发中，我们可以根据具体情况选择合适的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6468d63b968c7c53b08fc8e4