gap 已取代 grid-gap，统一控制行列间距，不替代 padding、不兼容 IE，且仅作用于相邻轨道间。
grid-gap 已被废弃，改用 gap
现代 CSS Grid 中 grid-gap 已是过时写法，浏览器虽大多仍兼容，但规范已明确推荐使用 gap。它同时控制行间距（row gap）和列间距（column gap），语法更统一，也支持 Flexbox（部分新版本）。
常见错误是继续写 grid-gap: 10px 还以为“能用就行”，结果在严格模式或未来引擎中可能失效，CI 检查也可能报 warning。
-
gap: 10px→ 行、列间距均为 10px -
gap: 10px 20px→ 行间距 10px，列间距 20px（顺序固定：先 row，后 column） -
gap: 1rem 0.5rem→ 支持任意长度单位，包括 rem、em、%（注意：% 在 grid 中按网格容器内联尺寸计算，非子项）
gap 与 margin 混用会引发意外重叠
很多人想“微调某一行的间距”，于是给某个 grid item 加 margin-bottom，结果发现视觉间距变大了，但实际 gap 并没变——这是 margin 和 gap 叠加导致的。
Grid 的 gap 是**在轨道之间预留的空白区域**，不参与子元素盒模型；而 margin 是子项自身外边距，会撑开布局、可能触发重排，甚至破坏对齐（尤其配合 align-items 或 justify-items 时）。
立即学习“前端免费学习笔记（深入）”；
- 需要统一间距 → 只用
gap - 需要单侧/局部调整 → 考虑用
padding包裹内容，或改用place-items+ 子项内边距 - 绝对避免：
margin+gap同时作用于同一方向，尤其在响应式断点中易失控
gap 不影响第一行上方和最后一行下方
gap 只作用于**相邻轨道之间**，也就是说：它不会在网格容器顶部加空隙，也不会在底部多留白。这常被误认为“gap 没生效”。
例如你写 gap: 20px，但首行紧贴容器上边缘、末行紧贴下边缘——这是正常行为。若需整体留白，必须单独设置容器的 padding。
-
padding: 20px在容器上 → 整体内边距，安全可控 - 不要试图用
gap模拟 padding，它不是设计来干这个的 - 嵌套 Grid 场景下，父容器的
padding和子 Grid 的gap各司其职，别混为一谈
gap 在 IE 中完全不支持，无降级方案
IE10/11 支持旧版 Grid（display: -ms-grid），但 gap 和 grid-gap 均不支持。即使加 -ms-grid-gap 也无效——微软从未实现该属性。
如果项目仍需兼容 IE，只能放弃 gap，改用以下方式之一：
- 用
margin+:nth-child手动模拟列间隙（如grid-column: span 2场景下极易错位） - 用伪元素或空 div 占位（语义差、维护成本高）
- 直接切到 Flexbox 布局并用
gap（Flexgap在 Edge 17+ / Chrome 84+ 支持，IE 全系不支持）
gap 看似简单，但它的“只作用于轨道间”“不替代 padding”“不兼容 IE”这三点，恰恰是线上 bug 最常出的地方。
