使用 gap 统一控制网格间距，避免混用 margin 导致错乱；推荐用 gap、row-gap 和 column-gap 精确设置，注意浏览器兼容性及旧版写法。
在使用 CSS 网格布局时，如果发现网格间距控制不精确，很可能是由于混用了不同的间距属性，或者浏览器兼容性处理不当。解决这个问题的关键是统一使用 gap 或 grid-gap 来设置网格项之间的间距，避免通过 margin 或 padding 手动调整，从而导致布局错乱或计算偏差。
使用 gap 统一控制网格间距
gap 是现代 CSS 中推荐使用的属性，用于设置网格行与列之间的间距。它替代了旧的 grid-gap，但在大多数情况下两者表现一致，且被主流浏览器广泛支持。
- 使用 gap: 10px; 可同时设置行和列的间距
- 使用 gap: 10px 20px; 分别设置行间距和列间距（类似 margin 的写法）
- 使用 row-gap 和 column-gap 单独控制更灵活
示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px; /* 推荐方式 */
}
避免使用 margin 造成间距叠加
常见的间距不精确问题来源于给网格子项添加 margin。当多个子项的 margin 相互接触时，会发生外边距合并（margin collapse），导致实际视觉间距大于预期。
立即学习“前端免费学习笔记（深入）”；
- 不要在 grid item 上设置左右或上下 margin 来“模拟”间距
- 移除子元素的 margin，完全由容器的 gap 控制布局间距
- 若必须使用 margin（如排版需要），应将其纳入整体间距计算中
注意浏览器兼容性
虽然 gap 在现代浏览器中支持良好，但在一些旧版本浏览器（如 IE）中不被支持。此时可考虑：
- 使用 grid-gap 作为兼容写法（在支持 grid 的浏览器中有效）
- 避免在需要兼容 IE 的项目中使用 gap，改用内联块或 flex 配合负 margin 技巧
- 使用 Autoprefixer 工具自动补全兼容性前缀
基本上就这些。只要坚持用 gap 统一管理间距，不混用 margin 搞布局，网格的间距就会稳定精确。
