CSS Grid 是一种强大的布局方式，它提供了各种方法来控制网格中单元格之间的距离。在本文中，我们将介绍 CSS Grid 布局中各种单元格之间距离的各种控制技巧，并提供一些示例代码。
网格单元格之间的间距
CSS Grid 布局中，可以通过 grid-gap 属性来控制网格单元格之间的间距。该属性接受两个参数，分别表示网格的行间距和列间距，如下所示：
.wrapper {
display: grid;
grid-gap: 20px 10px;
}在上面的例子中，网格的行间距为 20px，列间距为 10px。可以通过修改这些值来控制网格单元格之间的间距。
单元格内部的间距
CSS Grid 布局中，还可以通过 padding 属性来控制单元格内部的间距。例如：
<div class="wrapper"> <div class="cell">This is a cell</div> <div class="cell">This is a cell</div> <div class="cell">This is a cell</div> </div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.cell {
padding: 20px;
}在上面的例子中，padding 属性被应用于 .cell 类，控制单元格内部的间距。
单元格之间的间距控制
如果希望在网格布局中，只控制某些单元格之间的间距，可以使用 grid-row-gap 和 grid-column-gap 属性。
例如，在以下示例中，单元格之间的间距将只影响位于同一行的单元格：
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 20px;
}在上面的例子中，grid-row-gap 属性被设置为 20px，只影响单元格之间的行距。
如果想要控制位于同一列的单元格之间的距离，可以使用 grid-column-gap 属性。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
}在上面的例子中，grid-column-gap 属性被设置为 20px，只影响单元格之间的列距。
跨越多个单元格的间距控制
在 CSS Grid 布局中，可以通过 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来控制单元格的位置，从而跨越多个单元格。
在下面的示例中，我们将创建一个跨越两行和两列的单元格，并控制其中所包含的单元格之间的距离：
-- -------------------- ---- ------- -------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----------- - --------------- -- ------------- -- ------------------ -- ---------------- -- - ----------- -------- - -------- ----- -
在上面的例子中，.large 类被应用于跨越两行和两列的单元格，即从第一行第一列开始，跨越了第一行和第二行，第一列和第二列。此外，.content 类还用来控制单元格内部的间距。
结论
以上就是 CSS Grid 布局中控制单元格之间距离的各种技巧。通过应用这些技巧，可以创建出各种不同的网格布局，从而实现更好的用户体验。希望这些示例代码对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c5020ddd3a70eb6d7571c