如果你想找一种在 CSS Grid 中控制行列间距、又能立即生效且最省心的方案，那么真正推荐的其实只有 gap：只需在 grid 容器上写一行gap: 12px，就能一次性统一设置行间距和列间距。它的本质并不是给子元素添加外边距，而是在网格轨道之间预留空白区域。写单个值时，表示行和列共用同样的间距；写两个值时，则会按照row-gap、column-gap的顺序分别设置。还要特别注意，gap 不支持百分比；如果再和margin混合使用，间距很容易发生叠加，整个 CSS Grid 布局也容易变乱。
gap 是控制 CSS Grid 行距和列距时唯一值得推荐、并且能直接生效的方案，不建议再用 margin 或 padding 去模拟网格间距。
gap 设置行列统一间距
直接在 grid 容器上写 gap: 12px，就可以同时控制行与列之间的空隙。这并不是“给子项加边距”，而是在网格轨道之间创建留白。只要容器中至少存在两行或两列，这个间距效果就能直观看到，也是 CSS Grid 设置间距最标准的写法。
- 单值写法：
gap: 1rem→ 行间距和列间距都为1rem - 双值写法：
gap: 1rem 2rem→ 前者是row-gap（行间距），后者是column-gap（列间距），顺序不能写反 - 不支持百分比：
gap: 5%无效，但em、rem、px、vh等单位都可以正常使用
单独控制行距或列距
当你希望 grid 行距和列距分别设置不同的值，又不想记住双值写法的顺序时，直接使用 row-gap 和 column-gap 会更加清晰直观。它们还会覆盖 gap 中对应方向的设置，因此在实际开发中非常常用。
row-gap: 8px只影响行与行之间的距离，即使只有一列也会生效column-gap: 16px只影响列与列之间的距离，即使只有一行也同样有效- 如果同时写了
gap: 10px和row-gap: 12px，最终行间距会是12px，而列间距仍然保持10px
gap 和 margin 一起用会出问题
这是 CSS Grid 布局中最常见的误区之一：给 grid 子项再加上 margin: 4px，以为可以进一步“辅助留白”，结果实际间隙会变成 gap + margin 的叠加，导致元素对齐混乱，响应式布局也更容易失控。
gap是作用在容器层级的属性，不是子项边距，且不会被子项margin抵消- 对于跨列（
grid-column: span 2）或跨行的子项来说，gap仍然只作用在轨道之间，不会直接改变元素本身尺寸 - 如果只是想让某一个子项更突出，可以单独用
margin；如果想让所有子项之间保持统一、整齐的留白感，就只使用gap
兼容性和降级要点
在现代浏览器环境中（Chrome 66+、Firefox 63+、Safari 14.1+），可以放心使用 gap 来设置 CSS Grid 间距；但 IE 完全不支持它，连 row-gap 这类写法也无法识别。
- 不要用
@supports (gap: 0)包裹核心规则——因为 IE 会直接跳过整条规则，无法形成有效 fallback - 如果项目必须兼容 IE，就只能使用
display: -ms-grid+-ms-grid-columns等旧语法，再通过@supports (display: grid)覆盖成现代 Grid 写法 - 如果已经放弃 IE，就没必要再写任何 hack，
gap不是实验性特性，而是成熟稳定的标准方案
还有一个在 CSS Grid 间距设置中很容易被忽略的细节：gap 所占用的空间不会参与 fr 单位的分配计算，也不会压缩 grid-template-rows 的数值。换句话说，它属于额外插入的留白空间，该多宽还是多宽，该多高还是多高。
