网格布局是 CSS 中的一种新特性，它能够将元素组织成为网格形式，大大简化了网页的布局过程。但是在使用网格布局的过程中，控制元素之间的间距却是一件比较棘手的问题。本文将详细介绍如何在网格布局中控制元素的间距。
网格布局与间距
在网格布局中，我们使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列数和行数。其中，每一行或每一列的大小由网格容器自动决定，会按照等分原则来进行分配。当我们在网格容器中添加元素时，元素会自动填充到网格空间中，但是它们之间的间距却无法直接控制。
默认情况下，元素之间的间距由网格容器自动分配。如果我们想要通过 CSS 对元素之间的间距进行控制，我们需要使用以下三种技术：
grid-gap属性- 空白网格单元格
padding和margin属性
下面我们将详细介绍每种技术的使用方法。
使用 grid-gap 属性
grid-gap 属性可以用于设置网格元素之间的间距。其语法如下：
grid-gap: <row-gap> <column-gap>;
其中 row-gap 和 column-gap 分别表示行和列之间的间距。row-gap 和 column-gap 的值可以是任何有效的 CSS 长度单位，如像素（px）、百分比（%）等。下面是一个使用 grid-gap 属性的示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}在这个示例代码中，我们定义了一个网格容器，它包含了三列等宽的网格。我们使用 grid-gap 属性将行和列之间的间距设置为 20px。
使用空白网格单元格
使用空白网格单元格是在网格布局中控制间距的常用技巧。其基本思想是在容器中插入一个或多个空白网格单元格，用来控制元素之间的间距。下面是一个使用空白网格单元格的示例代码：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item {
background-color: #eee;
}
.gap {
width: 20px;
height: 20px;
}// javascriptcn.com 代码示例 <div class="container"> <div class="item">1</div> <div class="gap"></div> <div class="item">2</div> <div class="gap"></div> <div class="item">3</div> <div class="gap"></div> <div class="item">4</div> <div class="gap"></div> <div class="item">5</div> <div class="gap"></div> <div class="item">6</div> </div>
在这个示例代码中，我们依然定义了一个包含三列等宽的网格容器。但是我们并没有使用 grid-gap 属性来控制元素之间的间距。相反，我们使用了一个 gap 类名，将一个空白网格单元格插入到了容器中。这样，我们就可以通过调整空白网格单元格的大小来控制元素之间的间距。
使用 padding 和 margin 属性
我们还可以使用 padding 和 margin 属性来控制元素之间的间距。具体来说，我们可以将间距添加到网格容器和网格元素中的任何一个。下面是一个使用 padding 和 margin 属性进行间距控制的示例代码：
// javascriptcn.com 代码示例
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 20px;
}
.item {
background-color: #eee;
margin: 20px;
}在这个示例代码中，我们使用了 padding 和 margin 属性来进行间距控制。我们将容器中的 padding 属性设置为 20px，将元素中的 margin 属性设置为 20px。这样，我们就成功地控制了元素之间的间距。
总结
使用网格布局可以大大简化网页的布局工作，但是控制元素之间的间距却需要一些额外的技巧。本文介绍了网格布局中控制元素间距的三种主要技术：grid-gap 属性、空白网格单元格和 padding 和 margin 属性。通过学习和掌握这些技术，你可以更加轻松地将网格布局应用到你的项目中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a8cea7d4982a6ebcdad9f