gap属性是grid布局中控制行、列间距最直接的方案，等价于row-gap和column-gap简写，需作用于容器而非子项；注意inline-grid收缩问题及与padding叠加的视觉陷阱。
gap 属性能同时控制行间距和列间距
用 gap 是最直接的解法，它等价于 row-gap 和 column-gap 的简写，且在 Grid 布局中优先级更高、行为更可预测。别再用 margin 模拟间距——Grid 里 margin 会破坏轨道对齐，还容易引发塌陷或溢出。
常见错误是只设 row-gap 忘了 column-gap，或者把 gap 写在子项上（无效，必须写在 grid 容器上）。
-
gap: 1rem→ 行、列间距都是1rem -
gap: 1rem 2rem→ 行间距1rem，列间距2rem -
gap: 0.5rem 1rem在小屏下更紧凑，配合媒体查询很稳
gap 不生效？检查是否误用了 display: inline-grid
inline-grid 容器本身不撑满父容器宽度，有时会让 gap 看起来“没起作用”——其实起了，只是外层没空间显示。尤其当 grid 项内容少、又没设 min-width 时，整个网格会缩成一团，间隙被压缩到看不见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调试时先临时改成
display: grid，确认 gap 是否正常渲染 - 若必须用
inline-grid，给容器加width: max-content或min-width: fit-content防止过度收缩 - 注意：Firefox 对
inline-grid+gap的渲染偶尔有微小偏移，Chrome/Safari 更一致
gap 和 padding 混用时的视觉陷阱
gap 是轨道之间的空隙，padding 是容器内边距——两者叠加后，首行/首列项离容器边缘的距离 = padding + 第一个 gap。容易误以为“间距太大”，其实是 padding 多加了一层。
典型场景：
- 你设了
padding: 1rem和gap: 1rem，结果第一行项离顶部有2rem，不是 bug，是预期行为 - 想让内容真正“贴边”，要么去掉
padding，要么用align-content: start+justify-content: start控制整体位置 - 需要“内边距感但不叠加”，改用
padding并取消gap，靠grid-template-columns/rows中的fr单位留白更可控
/* 推荐：用 gap + padding 明确分工 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem; /* 仅控制项之间 */
padding: 1rem; /* 控制项与容器边缘 */
}旧项目兼容性不足时，gap 的降级方案很有限
gap 在 Grid 中从 Chrome 66 / Firefox 63 / Safari 16.4 起才完全支持。Safari 16.3 及更早版本对 gap 在 Grid 中的支持不完整（比如不支持 gap: 1rem 2rem 的双值语法）。
不要用 margin 负值去“模拟 gap”——会导致最后一行/列错位、响应式断裂、打印样式异常。
可行路径只有两条：
- 加
@supports (gap: 1rem)条件规则，现代浏览器走 gap，老版本 fallback 到 flex + margin（需重写布局逻辑） - 用 PostCSS 插件如
postcss-gap-properties，但它只处理 Flex，对 Grid 的 gap 无能为力 - 底线策略：明确要求用户升级 Safari 至 16.4+，或接受部分老设备显示略紧凑（gap 缺失 ≠ 布局崩溃）
实际调间距最难的点不在语法，而在判断“这个空隙到底是谁贡献的”——是 gap？padding？grid line 自身宽度？还是某个隐式 track 的默认尺寸？先关掉所有 padding 和 border，用浏览器开发者工具悬停 grid line，看清楚每条线的位置，比反复试数值快得多。
