CSS 网格间隙-猿码集

1. CSS 网格介绍

CSS 网格布局是一种在 CSS 中创建二维网格布局的方法，它可以在不依赖额外外部库和框架的情况下，实现复杂的页面布局。CSS 网格布局是一种比较新的技术，在 CSS3 中引入，目前受到很多 Web 开发人员的欢迎。

CSS 网格布局通过将一个 HTML 容器转换为带有行和列的网格，来定位和对齐子元素。系统允许您定义容器中要使用的行和列、单元格大小和间隔。您可以轻松地实现复杂的布局，例如多列和多行网格、弹性盒子、垂直对齐等。

要使用 CSS 网格布局，您需要自定义网格的结构。对于一个要转换为网格布局的容器，你需要设置一个 display 属性等于 grid，网格行和列、单元格大小等的定义都是通过设置方格容器的属性来实现的。


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

CSS 网格布局定义了以下两个属性来设置网格行和列之间的间隔：

grid-gap: 设置行和列之间的间距

gap: 在 CSS 网格布局中，该属性是 grid-row-gap 和 grid-column-gap 所设置值的简写

这两个属性定义了用户可以在网格行和列之间设置多少距离，相当于CSS 中的 padding 属性。

在使用 grid-gap 属性时，您可以指定行列间隙的值，如果您只想指定其中的一个，则可以设置 grid-row-gap 或 grid-column-gap。

下面的示例演示了使用 grid-gap 属性设置网格行列之间的间隔：


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

上面的代码中，我们将 grid-gap 设置为 10px，它将为每个网格行列之间设置 10px 的间距。如果我们只想指定行或列之间的值，可以使用 grid-row-gap 或 grid-column-gap。

下面的示例演示了使用 gap 属性设置网格行列之间的间隔：


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

上面的代码中，我们使用了 gap 属性将所有网格行列之间的间距都设置为了 10px。

网格间隙属性可以让您获得更好的控制网格布局，使该布局更个性化和更美观。当您需要在网格行列之间保留空白或间隔时，可以使用该属性。通过增加较大的行列间隔，我们可以获得更加舒适的布局。

如果您希望网格元素沿着网格容器的边缘对齐，可以通过控制网格间隙属性来实现。可以使用该属性向内缩进边缘来保留空白或间隔，这样可以使布局看起来更好。

此外，gap 可以用在其他布局技术上，如弹性盒子，在盒模型布局中，也可以使用 margin 和 padding 属性来设置空白。

在布局一个网格时，使用网格间隙属性可以让您获得更好的控制布局，使此布局更个性化和更美观。通过增加较大的行列间隔，我们可以获得更加舒适的布局。使用 gap 属性可以将所有网格行列之间的间距设置为一个值。

为了更好地管理网格间隙，请使用显示设置 grid-row-gap 和 grid-column-gap。通过合理设置较大的间隙，我们可以在网格容器的边缘保留适当的空白。