CSS Grid 是一种强大的布局技术，它允许我们在二维空间中创建复杂的网格布局。然而，有时候在网格之间添加一些间距是很有用的，本文将介绍如何在 CSS Grid 中设置网格之间的间距。
使用 grid-gap 来设置间距
设置网格之间的间距的最简单方法是使用 CSS Grid 的 grid-gap 属性。该属性允许我们为行和列分别定义水平和垂直的间距值，并在网格之间应用这些值。
语法
grid-gap 属性的语法非常简单，由两个值组成：第一个值表示行间距（垂直间距），第二个值表示列间距（水平间距）。例如，要在网格之间添加 20 像素的间距，可以使用以下代码：
.grid-container {
display: grid;
grid-gap: 20px;
}或者，如果你想为行和列分别指定不同的间距，可以通过使用 / 符号来分隔这两个值：
.grid-container {
display: grid;
grid-row-gap: 10px;
grid-column-gap: 20px;
}使用实例
下面的示例演示了如何在一个具有四个元素的网格布局中使用 grid-gap 属性添加间距：
<div class="grid-container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ----------------- ------- -------- ----- ----------- ------- -
在上面的示例中，我们首先为 .grid-container 元素定义了一个包含两列的网格布局，并将这些列的宽度设置为相等的。然后，我们使用 grid-gap 属性为行和列之间添加了一个 20 像素的间距。最后，我们为每个子元素添加一些样式，以便它们显示为橙色背景和居中的文本。 运行上述代码之后，你应该会看到一个包含四个元素的网格布局，并且有合适的间距。
使用 padding 和 margin 设置间距
除了使用 grid-gap 外，还可以使用 padding 和 margin 属性来为网格内部和外部添加间距。这种方法更具灵活性，因为你可以使用任意值（例如，rem、em、百分比或像素）给元素添加间距。
如果要为单个项目添加间距，可以使用该项目的 padding 或 margin 属性。例如，下面的代码为一个元素添加了 20 像素的内部间距：
.item {
padding: 20px;
}如果你要在网格容器的外部添加间距，则应该修改包含网格容器的元素的 margin 值。例如，下面的代码将为 .container 元素添加 10 像素的水平和垂直间距：
.container {
margin: 10px;
}总结
本文介绍了如何在 CSS Grid 中设置网格之间的间距。可以使用 grid-gap 属性来快速轻松地添加行和列之间的间距。此外，padding 和 margin 属性也可以用于在网格内部和外部添加间距，并且更灵活。无论使用哪种方法，都应该仔细选择合适
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65178b4495b1f8cacdfb9a2e