gap 已取代 grid-column-gap 和 grid-row-gap，统一控制网格行、列间距；需有至少两行或两列轨道才生效，与子项 margin 叠加而非替代，响应式中应平滑过渡并配合网格线调试。
grid-column-gap 和 grid-row-gap 已被废弃，改用 gap
这两个属性在现代 css 中已不推荐使用，浏览器虽仍支持，但规范中已被 gap 取代。如果你在查文档时看到旧教程还在用它们，要注意兼容性写法可能反而引发意料外的行为——比如在 Flexbox 容器里误用了 grid-column-gap，会完全无效。
当前标准做法是统一用 gap，它同时控制行间距和列间距：
container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; /* 等效于 row-gap: 12px; column-gap: 12px; */ }若需行列不同值，可写成 gap: 12px 8px（先 row-gap，后 column-gap），顺序不能反。
gap 在 Grid 中的生效前提：必须有明确的网格轨道
gap 不是“元素间边距”，而是“网格轨道之间的空隙”。如果容器没形成至少两行或两列，gap 就不会视觉上起作用。
立即学习“前端免费学习笔记（深入）”；
- 单列 Grid（如
grid-template-columns: 1fr）+ 多个子项 → 子项垂直堆叠，此时gap: 10px仅表现为行间距，列方向无变化 - 单行 Grid（如
grid-template-rows: 1fr）→ 同理，只体现列间距 - 子项用
grid-column: span 2跨列？不影响 gap 计算，gap 始终作用于轨道之间，而非单元格边缘
与 margin 冲突时，gap 优先级更高且不可被子项 margin 抵消
这是最容易踩的坑：有人给子项加 margin: 4px 想“辅助”留白，结果发现间隙变大了两倍。因为 gap 是网格容器自身的布局属性，它和子项的 margin 是叠加关系，不是替代关系。
正确做法是：
- 统一用
gap控制网格内空白，子项不设相关方向的 margin（尤其避免margin-right/margin-bottom） - 若需某几个子项额外留空，改用
place-self或justify-self/align-self微调位置，而不是靠 margin “挤”出来 - 注意：firefox 旧版本对
gap+margin的渲染有轻微偏差，建议测试时打开 DevTools 查看实际盒模型
响应式中动态调整 gap 要避免断点错位
用媒体查询切换 gap 值很常见，但要注意：如果同时在断点中修改 grid-template-columns，而 gap 值变化幅度较大（比如从 4px 跳到 24px），可能导致内容重排时出现短暂抖动。
缓解方式：
- 让 gap 变化尽量平滑，例如用
transition: gap 0.2s ease（注意：部分浏览器对gap的 transition 支持有限，safari 15.4+ 才稳定） - 避免在同一个断点里既改列数又剧烈调 gap；可先固定 gap，再通过
minmax()或clamp()让轨道自适应，减少视觉跳变 - 如果设计要求 gap 为 0 → 非 0 的硬切换（如折叠面板展开），建议配合
opacity或transform做过渡，别只依赖 gap 动画
gap 看似简单，但它和 grid-template、子项跨度、书写模式（rtl / vertical-lr）都存在隐式耦合，调的时候最好打开浏览器的网格线调试（DevTools → Layout → Grid overlay），不然容易把布局问题归错因。