CSS Grid 布局是一种强大的网格布局系统，它可以使我们轻松地创建复杂的布局。在使用 CSS Grid 布局时，我们经常需要控制子元素的间隙和间距。本文将介绍如何使用 CSS Grid 布局来控制子元素的间隙和间距。
控制子元素的间隙
CSS Grid 布局提供了一些属性来控制子元素之间的间隙。这些属性分别是 grid-column-gap 和 grid-row-gap。
grid-column-gap
grid-column-gap 属性用于设置列之间的间隙。例如，如果我们希望在列之间有 20 像素的间隙，可以这样写：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
}在上面的代码中，我们将 grid-column-gap 属性设置为 20px，这将在列之间创建 20 像素的间隙。
grid-row-gap
grid-row-gap 属性用于设置行之间的间隙。例如，如果我们希望在行之间有 20 像素的间隙，可以这样写：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 20px;
}在上面的代码中，我们将 grid-row-gap 属性设置为 20px，这将在行之间创建 20 像素的间隙。
控制子元素的间距
除了控制子元素之间的间隙之外，我们还可以使用 CSS Grid 布局来控制子元素的间距。这可以通过设置子元素的 padding 属性来实现。
控制子元素的水平间距
要控制子元素之间的水平间距，我们可以设置子元素的 padding-left 和 padding-right 属性。例如，如果我们希望在子元素之间有 10 像素的水平间距，可以这样写：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- - ---------- - ------------- ---- -------------- ---- -
在上面的代码中，我们将 padding-left 和 padding-right 属性设置为 5px，这将在子元素之间创建 10 像素的水平间距。
控制子元素的垂直间距
要控制子元素之间的垂直间距，我们可以设置子元素的 padding-top 和 padding-bottom 属性。例如，如果我们希望在子元素之间有 10 像素的垂直间距，可以这样写：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- - ---------- - ------------ ---- --------------- ---- -
在上面的代码中，我们将 padding-top 和 padding-bottom 属性设置为 5px，这将在子元素之间创建 10 像素的垂直间距。
示例代码
下面是一个完整的示例代码，它演示了如何使用 CSS Grid 布局来控制子元素的间隙和间距：
-- -------------------- ---- -------
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
------
-------
--------------- -
-------- -----
---------------------- --------- -----
---------------- -----
------------- -----
-
---------- -
-------- -----
----------------- -----
----------- -------
-
--------在上面的代码中，我们创建了一个包含六个子元素的网格布局。我们将 grid-column-gap 和 grid-row-gap 属性设置为 20px，这将在子元素之间创建 20 像素的间隙。我们还将子元素的 padding 属性设置为 10px，这将在子元素之间创建 20 像素的间距。
结论
通过使用 CSS Grid 布局，我们可以轻松地控制子元素之间的间隙和间距。使用 grid-column-gap 和 grid-row-gap 属性可以控制子元素之间的间隙，而使用子元素的 padding 属性可以控制子元素之间的间距。希望本文对你理解 CSS Grid 布局的子元素间隙和间距有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6740239e5ade33eb7232465e