如何在 CSS Grid 中使用 “grid-gap” 控制元素间隔-JavaScript中文网-JavaScript教程资源分享门户

grid-gap是一种CSS Grid布局中用来指定网格行列间距的属性。在实际项目中，通常根据不同要求来设置网格网格行列之间的间距。在这篇文章中，将会深入了解grid-gap，并提供使用案例，以便更好地理解它的使用。

什么是grid-gap？

grid-gap属性是CSS网格布局设计的间距设置。它允许我们在网格项之间空出空间来实现使用它们布局时的距离。可用于在行或列之间添加空间和它允许我们同时控制网格行列：

.grid-container {
  display: grid;
  grid-gap: 10px;
}

上面的代码将在网格项之间添加10像素的间隔，值得注意的是，grid-gap的值可以是负数：

.grid-container {
  display: grid;
  grid-gap: -10px;
}

负值表示网格项之间的重叠。

所以 grid-gap 不仅提供像素值，而且还可以设为百分比，这个值相对于网格容器的宽度(或高度)。

`grid-gap`中的语法

grid-gap可以使用以下语法：

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

在上面的规则中，grid-row-gap用于设置网格行之间的间距，而grid-column-gap用于设置网格列之间的间距。该属性还有可以以下语法，与以上语法等效（不过笔者不建议使用）：

.container {
  grid-gap: <grid-row-gap> <grid-column-gap> <grid-row-gap> <grid-column-gap>;
}

在以上语法中，前面的两个值为第一行与第一列提供了上下和左右的空白，后面的两个值则为最后一行和最后一列提供了空白，即如果没有fifth html element，则最后一行（即column）还是有一个空白的位置。

由于这个语法后两个值为可选项，所以可以通过的如下代码：

.container {
  grid-gap: 10px 20px;
  /* 等价于： */
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

如何应用grid-gap？

正如前面提到的，我们可以使用像素和百分比来应用grid-gap。以下是示例：

.grid-container {
  display: grid;
  grid-gap: 20px;
}

grid-gap设为20像素：

对于一个复杂的网格项布局，可以按行和列分别设置grid-column-gap和grid-row-gap来覆盖默认网格间距。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

上面的代码将创建一个带有3列、每列宽度为1的网格项。同时在行和列之间添加10像素和20像素的水平和垂直间隔：

此外，还可以在网格容器中将grid-gap属性结合其他CSS属性使用。以下是一个示例，显示了如何在网格项目和网格容器之间创建间隔：

// www.javascriptcn.com code example
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 10px;
  padding: 20px;
  background: #ddd;
}

.grid-item {
  padding: 20px;
  background: #999;
}

上面的代码将在网格项目和网格容器之间添加20像素的间隔，以突出显示布局中的间距：

总结

在本文中，我们深入了解了grid-gap属性，了解了如何按行和列分别设置间距，并可以设置px和%单位的属性值。利用grid-gap的优势，在网格布局的项目中，运用这一属性可以更好的实现一些样式需求。

示例代码

在提供完整的示例代码，让读者更好的理解使用grid-gap:

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 10px;
  padding: 20px;
  background: #ddd;
}

.grid-item {
  padding: 20px;
  background: #999;
}
</style>
</head>
<body>

<h2>使用grid-gap在grid中控制网格项间距</h2>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>  
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

<h3>亲自试一试</h3>
<p>使用grid-gap属性调整列距离:</p>
<div class="grid-container" style="grid-gap:50px;">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>  
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

<h3>使用grid-row-gap和grid-column-gap属性调整行和列距离:</h3>
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>  
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

</body>
</html>

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649ab14448841e98947a39d5

如何在 CSS Grid 中使用 “grid-gap” 控制元素间隔

什么是grid-gap？

grid-gap中的语法

如何应用grid-gap？

总结

示例代码

接着读

`grid-gap`中的语法