CSS Grid 是一种基于网格的布局系统，用于在网页上按行和列分割区域，以便更好地控制页面结构。这一技术在前端开发中越来越受欢迎，因为它提供了更灵活、更强大的布局选项。其中一个比较有用的属性是 grid-gap，可以用来设置内部各元素之间的间距。
语法
grid-gap 属性定义了行和列之间的空白。它有两个值，第一个是行间距（grid-row-gap），第二个是列间距（grid-column-gap），这两个值可以一起设置，也可以单独设置。
grid-gap: <grid-row-gap> <grid-column-gap>;
在这里，我们可以设置行和列的间距，它们都使用相同的度量。如果只设置一个值，那么这个值将同时应用于行和列。
grid-gap: <grid-row-gap>;
另外，可以使用 grid-row-gap 和 grid-column-gap 分别设置行和列之间的距离。
示例
让我们来看一个简单的示例，这个示例包含一个网格布局，在其中使用了 grid-gap：
-- -------------------- ---- ------- ---- ----------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ---- ------------------------- ------ ------- --------------- - -------- ----- ---------------------- --------- ----- --------- ----- - ---------- - ----------------- ------ -------- ----- ---------- ----- ----------- ------- - --------
在这个示例中，我们创建了一个具有 3 列和 2 行的网格容器。我们使用了 repeat() 函数来定义 3 列，每个列的宽度均为 1fr。然后我们使用 grid-gap 属性将行和列之间的距离设置为 20px。最后，我们创建了 6 个网格项（grid-item），它们都具有相同的样式（背景颜色为珊瑚色，内部填充为 10px，字体大小为 20px，居中对齐）。
结论
CSS Grid 的 grid-gap 属性使设置网格布局变得更容易。通过它，我们可以轻松地为网格中的元素设置间距，而无需使用其他方法。如果您正在学习 CSS Grid，这个属性可以使您在网格布局中更加自由地设计页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f59cee9a7045d0d71f8dc