grid-gap是一种CSS Grid布局中用来指定网格行列间距的属性。在实际项目中，通常根据不同要求来设置网格网格行列之间的间距。在这篇文章中，将会深入了解grid-gap，并提供使用案例，以便更好地理解它的使用。
什么是grid-gap？
grid-gap属性是CSS网格布局设计的间距设置。它允许我们在网格项之间空出空间来实现使用它们布局时的距离。可用于在行或列之间添加空间和它允许我们同时控制网格行列：
--------------- - -------- ----- --------- ----- -
上面的代码将在网格项之间添加10像素的间隔，值得注意的是，grid-gap的值可以是负数：
--------------- - -------- ----- --------- ------ -
负值表示网格项之间的重叠。
所以 grid-gap 不仅提供像素值，而且还可以设为百分比，这个值相对于网格容器的宽度(或高度)。
grid-gap中的语法
grid-gap可以使用以下语法：
---------- - --------- -------------- ------------------ -
在上面的规则中，grid-row-gap用于设置网格行之间的间距，而grid-column-gap用于设置网格列之间的间距。 该属性还有可以以下语法，与以上语法等效（不过笔者不建议使用）：
---------- - --------- -------------- ----------------- -------------- ------------------ -
在以上语法中，前面的两个值为第一行与第一列提供了上下和左右的空白，后面的两个值则为最后一行和最后一列提供了空白，即如果没有fifth html element，则最后一行（即column）还是有一个空白的位置。
由于这个语法后两个值为可选项，所以可以通过的如下代码：
---------- - --------- ---- ----- -- ---- -- ------------- ----- ---------------- ----- -
如何应用grid-gap？
正如前面提到的，我们可以使用像素和百分比来应用grid-gap。以下是示例：
--------------- - -------- ----- --------- ----- -
grid-gap设为20像素：
对于一个复杂的网格项布局，可以按行和列分别设置grid-column-gap和grid-row-gap来覆盖默认网格间距。
--------------- - -------- ----- ---------------------- --------- ----- ---------------- ----- ------------- ----- -
上面的代码将创建一个带有3列、每列宽度为1的网格项。同时在行和列之间添加10像素和20像素的水平和垂直间隔：
此外，还可以在网格容器中将grid-gap属性结合其他CSS属性使用。以下是一个示例，显示了如何在网格项目和网格容器之间创建间隔：
--------------- - -------- ----- ---------------------- --------- ----- ---------------- ----- ------------- ----- -------- ----- ----------- ----- - ---------- - -------- ----- ----------- ----- -
上面的代码将在网格项目和网格容器之间添加20像素的间隔，以突出显示布局中的间距：
总结
在本文中，我们深入了解了grid-gap属性，了解了如何按行和列分别设置间距，并可以设置px和%单位的属性值。利用grid-gap的优势，在网格布局的项目中，运用这一属性可以更好的实现一些样式需求。
示例代码
在提供完整的示例代码，让读者更好的理解使用grid-gap:
--------- ----- ------ ------ ----- ---------------- ------- --------------- - -------- ----- ---------------------- --------- ----- ---------------- ----- ------------- ----- -------- ----- ----------- ----- - ---------- - -------- ----- ----------- ----- - -------- ------- ------ -------------------------------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ------ -------------- ------------------------- ---- ---------------------- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ------ ------------------------------------------------- ---- ----------------------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ---- ---------------------- ------- ------ ------- -------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649ab14448841e98947a39d5