在 CSS Grid 中使用网格间距是一个很常见的问题，特别是对于那些刚刚开始学习 CSS Grid 的前端开发人员而言。本篇文章将会给您提供详细的指导，帮助您学习如何设置网格间距并且在实践中使用它。
什么是网格间距？
网格间距是指网格行和列之间的空白区域。在 CSS Grid 中，我们可以使用一个单独的属性来定义这个间距。该属性名为 “grid-gap”。
如何设置网格间距？
CSS Grid 的“grid-gap”属性包括两个子属性：一个表示行之间的间距，一个表示列之间的间距。如下所示：
.grid-container {
display: grid;
grid-gap: 20px 10px;
}第一行的值 “20px” 表示行之间的间距，而第二行的值 “10px” 表示列之间的间距。您可以使用任何 CSS 长度单位来设置间距，如像素、百分比、em 等等。
您还可以使用一个单一的值来为所有的行和列一起定义间距，如下所示：
.grid-container {
display: grid;
grid-gap: 20px;
}以上代码将会在行和列之间都使用 20px 的间距。
如何使用网格间距？
假设您有一个包含四个 div 元素的网格布局，代码如下：
<div class="grid-container"> <div class="grid-item">A</div> <div class="grid-item">B</div> <div class="grid-item">C</div> <div class="grid-item">D</div> </div>
将它们放置在一个网格容器中，然后在该容器中设置网格间距：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}现在容器中的子元素会重叠，因为还没有为它们设置位置。为了设置它们的位置，我们需要使用“grid-row”和“grid-column”属性。以下是完整的代码：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- ---- --------- ----- - ---------- - ----------------- ----- -------- ----- - ------- - --------- -- ------------ - - ---- -- - ------- - --------- -- ------------ -- - ------- - --------- -- ------------ -- - ------- - --------- -- ------------ - - ---- -- -
在以上代码中，每个 div 元素都被标记为一个“grid-item”。然后，它们被放置在一个网格容器中，该容器设置了两个相同大小的列，并且设置了 20px 的网格间距。
在每个“grid-item”元素上使用“grid-row”和“grid-column”属性来为每个子元素设置位置。这些属性是指该元素要放置在哪一行或列，以及具有多少列的宽度。
最后，每个“grid-item”元素都设置了一个背景颜色和一个内边距，以便更容易地看到布局中的元素。
总结
以上就是如何在 CSS Grid 中使用网格间距的详细指南和实践例子。通过使用“grid-gap”属性，您可以为您的网格布局设置行和列之间的间距。您可以使用任何 CSS 长度单位来定义间距，并且可以将间距设置为单行或单列，或者为所有的行或列一起定义。记得使用“grid-row”和“grid-column”属性为子元素设置位置，使得您的网格布局看起来更加清晰美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c559b968c7c53b0ea9fd6