背景
上图展示了一个按钮组，但是问题也很明显：每个按钮之间没有任何间距；很容易想到给每个按钮加margin，但是又不能直接加到button组件上，所以就有了button-group组件:
.wd-button-group .wd-btn {
margin-right: 8px;
margin-bottom: 12px;
}
是不是完美解决呢？再看下面这种场景：
如果按钮就在一行，下面就会多出来12px的margin，在有些场景中就会导致不能对齐的问题，比如在form中:
gap
gap 属性是用来设置网格行与列之间的间隙，它是row-gap和column-gap的缩写形式
- gap的历史
刚开始是没有gap属性的，最开始出现的类似的CSS属性是在Grid布局中的grid-gap，是CSS grid-row-gap和grid-column-gap属性的缩写;
但是在multi-column布局中存在column-gap属性，为了能能够方便开发者，grid-gap从规范中去除了，出现了新的标准：gap、row-gap和column-gap
与gap相关的属性一共有6个：
grid-row-gap
grid-column-gap
grid-gap
row-gap
column-gap
gap
Grid布局中的gap
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
/* css */
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 50px 50px 100px;
}
设置gap
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 50px 50px 100px;
gap: 20px;
}
flex布局中的gap
.container {
display: flex;
gap: 20px;
}
📢 在flex布局中，以flex-direction：row为例，设置了row-gap：20px，但是如果只有一行的时候，row-gap就不会生效：
到这里就解决了刚开始提出的button-group的问题。
multi-column布局中的gap
.container {
column-count: 3;
row-gap: 40px;
column-gap: 10px;
column-rule: 5px solid orange;
}
它和其他两种布局方式的区别：
-
row-gap 不会生效
-
column-gap 默认值不是0,
-
gaps 可以被设置样式，设置
column-rule，它占用的是gap的空间.
📢 display: block中设置gap不会生效：