前言
CSS Grid 是一种强大的布局方式，它可以让开发者轻松地设计并排列网页元素。
但是，有时候我们需要在行 / 列之间添加间距，以使网页看起来更加美观。今天我们就来分享一下如何在 CSS Grid 中添加间距。
CSS Grid
CSS Grid 是一种二维网格布局系统，它允许我们创建复杂的布局，并对各个网格进行定位。在 Grid 中，我们可以指定每一个网格的尺寸、位置、排列方式等等。
下面的代码展示了如何使用 Grid 创建一个简单的布局：
---------- - -------- ----- ---------------------- --- ---- ------------------- ----- ------ ---- ----- - ---- - ----------------- ----- -
---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ------
在这个代码中，我们创建了一个 container，并指定它使用 grid 布局。我们定义了该容器包含两行，每行包含两个宽为 1fr 的列。我们还通过 gap 属性指定了行 / 列之间的间距为 20px。
这里 <div class="box"></div> 是一个简单的占位符，用于填充每个网格。你可以使用任何其他元素 / 内容，并根据需要调整网格的尺寸和位置。
如何添加间距
为了在 CSS Grid 中添加间距，我们可以使用 grid-gap 属性，该属性可以同时设置行和列之间的间距。
例如：
---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- --------- ----- - ---- - ----------------- ----- -
---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ------
在这个例子中，我们使用了 repeat(3, 1fr) 指定了三列和三行，并使用 grid-gap 指定了行 / 列之间的间距为 20px。
自定义间距
如果你想要自定义每行 / 列的间距，你可以使用 grid-row-gap 和 grid-column-gap 属性来分别设置行和列之间的间距。
例如：
---------- - -------- ----- ---------------------- --------- ----- ------------------- --------- ----- ------------- ----- ---------------- ----- - ---- - ----------------- ----- -
---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ---- ------------------ ------
在这个例子中，我们使用了 grid-row-gap 和 grid-column-gap 对行和列进行了不同的间距设置。
总结
以上是如何在 CSS Grid 中添加行 / 列之间的间距的方法。使用 grid-gap 属性可以轻松地为网格添加间距，而 grid-row-gap 和 grid-column-gap 则可以用于自定义行和列之间的间距。我们希望这篇文章对你有所帮助，祝你在使用 CSS Grid 进行网页布局时能够更加得心应手。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654f26147d4982a6eb82649f