**在本文中，将探讨 CSS 属性gap的用途，它使得在元素之间添加空间变得非常容易，并解决了多年来困扰开发人员的许多布局问题。**下面是MDN对该属性的定义
CSS
gap属性是用来设置网格行与列之间的间隙（gutters），该属性是row-gap和column-gap的简写形式。
gap有什么作用
gap 属性允许在水平和垂直方向上为元素之间添加间距。当然，使用 margin 也能来实现。但是使用 margin 来分隔项可能会很麻烦，特别是当项跨行时，因为总会有一个最后一项有不需要的 margin。
下面的示例展示了四个 <div> 元素，它们之间使用右边和底部的 margin 分隔开来：
article > div {
margin: 0 10px 10px 0;
}
注意到容器的背景在右侧和底部超出了吗？ gap 属性只在项之间添加间距，这使得布局变得更加容易。
下面是与上面相同的布局，但这次使用 gap 而不是 margin：
article {
display: grid;
gap: 10px;
}
现在不再有在右侧和底部出现的不美观的、不需要的间隙。间隙现在只存在于项之间，并且项紧密地适应其容器。
可以在三种不同的布局模式下使用 gap 属性：Grid（网格）、Flexbox（弹性盒）和多列布局。下面将依次看看每种布局模式。
如何使用gap
使用 gap 属性就像写上 gap: 10px 一样简单（我们在上面的示例中看到了结果）。但让我们来看看这实际上意味着什么。 gap 属性可以接受两个值：行间距（即元素之间的行间距）和列间距（元素之间的列间距）：gap: <row-gap> <column-gap>。
如果只指定一个值，它将应用于所有的行间距和列间距。
我们可以使用 row-gap 和 column-gap 属性分别指定列间距和行间距。
gap 属性的值可以是任何长度单位（如像素、ems、视窗单位），百分比单位，甚至是使用 calc() 函数计算的值。
如何在 CSS Grid中使用gap
在上面看到了一个使用Grid布局的gap的示例。让我们尝试另一个示例，使用一些不同的单位：
article {
display: grid;
gap: 30px 1em;
}
这次，为行和列使用了不同的单位。 gap的一个额外优点是，它在响应式布局中能够无缝工作。如果在两个项之间设置了间距，无论这些项是并排还是上下排列，该间距都会应用，如下面的示例中所示。
如何在flex中使用gap
当Flexbox首次出现时，并没有gap属性，因此不得不回到使用痛苦的老式方法——使用边距。幸运的是，现在在现代浏览器中，使用gap与Flexbox是主流且得到良好支持的。
可以以与Grid相同的方式使用它：
article {
display: flex;
gap: 2vw 1vw;
flex-wrap: wrap;
}
在我们的弹性项目在响应式环境中换行的情况下，间距设置将根据需要重新布局，通常在垂直和水平方向上无法对齐，如下面的示例所示。
如果我们希望间距在水平和垂直方向上对齐，最好使用Grid布局。与Grid一样，如果我们只想在列或行之间设置间距，可以分别使用column-gap和row-gap属性。
如何在多列布局中使用gap
article {
column-count: 2;
gap: 3em;
}
多列布局将内容组织成列，但默认情况下，这些列之间会由浏览器设置为1em的间距。我们可以使用gap属性来设置我们期望的间距宽度：
要让效果更好看一些，我们可以在中间加一条分割线：
请注意，column-rule是column-rule-width、column-rule-style和column-rule-color的简写形式。
column-rule属性用于设置多列布局中列之间的规则线，它具有以下三个子属性：
column-rule-width：用于定义规则线的宽度。可以使用像素、百分比或其他长度单位来指定宽度值。column-rule-style：用于定义规则线的样式，如实线、虚线、点线等。常见的样式值包括solid（实线）、dashed（虚线）、dotted（点线）等。column-rule-color：用于定义规则线的颜色。可以使用颜色名称、十六进制值或RGB值来指定颜色。
小结
gap属性是一个方便的工具，用于在使用Grid、Flexbox 和多列布局时分隔项目。它使我们不必使用旧的混乱的边距技巧。它可以在整个设计中以创造性的方式使用，但不要过度使用！
