CSS Grid中的gap属性可简洁设置行列间距。row-gap定义行间垂直间距，如三行产生两个20px间隙；column-gap设置列间水平间距，三列间有15px间隔；gap为简写，单值时行列同距，双值则分别指定row-gap和column-gap，现代浏览器广泛支持，需确保容器设为display: grid，避免与Flexbox混淆。
在CSS Grid布局中，可以通过 row-gap、column-gap 和简写的 gap 属性来控制网格行与列之间的间距。这些属性让布局更清晰、更易维护，无需依赖 margin 或 padding 来制造空白。
row-gap：设置行与行之间的间距
row-gap 用于定义网格容器中行与行之间的垂直间距。它作用于每一行之间，不会在容器的顶部或底部额外添加空白。
例如：.container {
display: grid;
grid-template-rows: 100px 100px 100px;
row-gap: 20px;
}
这个例子中，三行网格之间会有 20px 的垂直间隔，共产生两个间隙（第一与第二行之间，第二与第三行之间）。
column-gap：设置列与列之间的间距
column-gap 用于定义网格中列与列之间的水平间距。和 row-gap 类似，它只作用于列之间。
立即学习“前端免费学习笔记（深入）”；
例如：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 15px;
}
三列之间会各保持 15px 的水平间隔，共两个间隙出现在三列之间。
gap：row-gap 与 column-gap 的简写形式
gap 是 row-gap 和 column-gap 的简写属性，可以同时设置行列间距，语法如下：
- 一个值：表示行和列使用相同的间距
- 两个值：第一个是 row-gap，第二个是 column-gap
.container {
display: grid;
gap: 20px; /* 行和列都是 20px */
}
<p>.container {
gap: 20px 10px; /<em> row-gap: 20px, column-gap: 10px </em>/
}
兼容性与注意事项
现代浏览器普遍支持 gap、row-gap 和 column-gap 在 Grid 布局中的使用。但需注意：
- 确保父容器设置了
display: grid或display: inline-grid - 旧版本 Safari 可能需要测试兼容性，但目前主流已支持
- 不要与 flexbox 中的 gap 混淆，虽然语法类似，但这是 Grid 特有的特性
基本上就这些。用好 gap 系列属性，能让 Grid 布局更加整洁，减少 hack 式的 margin 调整。不复杂但容易忽略。
