CSS Grid 布局是前端开发者们喜欢的一种布局方式，因为它可以创建复杂的网格结构，而不需要太多的 CSS 代码。CSS Grid 提供了很多功能和属性，其中一个重要的属性是 grid-gap。grid-gap 可以帮助我们在网格单元格之间创建间距，本文就会详细介绍 CSS Grid 中的 grid-gap 属性以及如何使用它。
grid-gap 简介
grid-gap 是一个可以用于 CSS Grid 的属性，用于在网格的行和列之间创建间距。它可以设置一个值，也可以设置两个值来创建水平间距和垂直间距。默认情况下，grid-gap 值为 0，这意味着单元格之间没有间距。
grid-gap: <length> | <percentage> | normal | initial | inherit;
<length>: 表示间距的长度值，如像素或 em。<percentage>: 表示为单元格的百分比长度。normal: 无间距，这是默认值。initial: 恢复到默认值。inherit: 继承父元素的值。
水平和垂直间距
我们可以使用一个单独的 grid-gap 值来设置行和列之间的同一间距，还可以使用两个值来分别指定水平和垂直间距。下面是两个例子。
-- -------------------- ---- ------- -- -- -- ----- -- -------- - -------- ----- --------- ----- - -- -- -- -------- -- ------- -- -------- - -------- ----- ------------- ----- ---------------- ----- -
网格布局和网格线
要了解如何使用 grid-gap，我们需要先了解一个重要概念，即网格布局和网格线。
网格布局
CSS Grid 布局是一个二维布局系统，它使用网格来拆分页面。通过将元素放置在 API 中定义的行和列上，我们可以实现复杂的布局。
例如，下面的代码展示了如何创建一个 3x3 网格：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}这段代码创建了一个包含 9 个单元格的网格，每个单元格都具有相同的 width 和 height。
网格线
网格线是用于分割网格的线条。我们可以通过使用网格线名称或索引来指定元素所在的行和列。
例如，下面的代码创建了一个 3x3 的网格，其中第一个元素位于第 1 行和第 1 列，第二个元素位于第 2 行和第 2 列。
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- - ------ - --------- -- ------------ -- - ------ - --------- -- ------------ -- -
使用 grid-gap 创建间距
现在我们已经理解了网格布局和网格线的概念，我们可以看看如何使用 grid-gap 属性为网格单元格创建间距。
单一 grid-gap 值
使用单一 grid-gap 值，可以为整个网格中所有行和列之间创建相同的间距，如下例所示。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}这会在每个单元格周围创建一个 10 像素的间距。
指定垂直和水平间距
我们还可以使用 grid-row-gap 和 grid-column-gap 属性分别为每行和每列创建不同的间距，如下例所示。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
grid-column-gap: 10px;
}这会在每行之间创建 20 像素的垂直间距，在每列之间创建 10 像素的水平间距。
指定行和列间距
我们还可以使用 grid-gap 属性为每个行和列单独指定不同的间距，如下例所示。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px 20px;
}这会在每行之间创建 10 像素的垂直间距，在每列之间创建 20 像素的水平间距。
总结
在 CSS Grid 中，我们可以使用 grid-gap 属性为单元格之间创建间距。通过设置一个或两个 grid-gap 值，我们可以在整个网格布局中创建水平和垂直间距。了解如何使用 grid-gap 属性可以帮助我们更有效地创建各种复杂的布局，提高我们的前端开发技能。
示例代码
-- -------------------- ---- ------- ---- ---------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ---- ----------- -------------- ------
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cdf99968c7c53b0f6463d