grid-gap 被弃用是因为 CSS Grid Level 2 规范将其标记为过时，统一改用 gap；它现支持 Grid、Flexbox 和多列布局，但 IE 完全不支持，且 gap 不继承、不与 margin 叠加抵消，subgrid 也不继承父级 gap。
grid-gap 为什么被弃用了？
因为 grid-gap 已在 CSS Grid Level 2 规范中被标记为过时，现代写法统一用 gap。它不只是 Grid 专用——Flexbox 和多列布局（column-count）现在也支持 gap，但只有 Grid 完全生效（Flexbox 的 gap 在旧版 Safari 中曾有兼容问题）。
常见错误现象：grid-gap: 1rem 在某些旧项目里还能跑，但新项目一开严格 lint 就报 warning；更隐蔽的是，当同时写了 gap 和 grid-gap，后者会被忽略，但开发者可能误以为“双保险”。
- 用
gap替代所有grid-gap、grid-row-gap、grid-column-gap - 单值写法
gap: 1rem同时控制行距和列距；双值写法gap: 1rem 0.5rem表示row-gap在前、column-gap在后 - 注意：IE 完全不支持
gap，如果需兼容 IE，得回退到margin+:nth-child手动模拟，但代价是语义断裂和维护成本飙升
gap 和 margin 混用会出什么问题？
很多人想“保险起见”，在 Grid 容器设了 gap: 1rem，又给子项加 margin: 0.5rem，结果间距翻倍还错位。根本原因是：Grid 的 gap 是容器级的“轨道间隙”，不参与子项盒模型计算；而 margin 是子项自身的外边距，两者叠加，浏览器不会自动抵消。
使用场景：当你需要“部分子项额外留白”（比如最后一个按钮要和底部保持更大距离），别改 gap，而是单独给那个元素加 margin —— 但必须确认父容器没设 align-items: stretch 或其他导致 margin collapse 的条件。
立即学习“前端免费学习笔记（深入）”；
- 绝对不要对 Grid 子项设
margin来模拟整体间隙，这是反模式 - 如果设计稿要求“首行无上边距、末行无下边距”，
gap无法直接满足，得用:first-row/:last-row（目前仅 Firefox 支持），或换思路：用padding配合place-content: start - Flexbox 下
gap对margin的影响更敏感——比如gap: 1rem加margin-right: 1rem可能触发换行，而 Grid 不会
gap 在响应式中怎么避免断点错乱？
直接写 gap: clamp(0.5rem, 2vw, 1.5rem) 看似聪明，但多数布局引擎（尤其 Safari）对 gap 中的 clamp() 解析不稳定，容易回退成 0 或固定值。真正可靠的方案是分层控制：用媒体查询切换 gap 值，而非依赖函数式单位。
性能影响很小，但可维护性差——如果一个组件在 3 个断点下要用不同 gap，就得写 3 组媒体查询；更麻烦的是，当这个组件嵌套在另一个 Grid 里，父级的 gap 和子级的会叠加，视觉节奏就失控了。
- 优先用相对单位：
gap: 1em比gap: 1rem更适应字体缩放，且在响应式排版中更连贯 - 避免在
@container查询中用gap做条件判断——目前主流浏览器对 container queries + gap 的组合支持不一致 - 如果必须动态控制，用 CSS 自定义属性 + JS 切换更稳妥：
style="--grid-gap: 1rem"，然后在 CSS 里写gap: var(--grid-gap)
subgrid 里 gap 能继承吗？
不能。这是最容易被忽略的一点：subgrid 允许子网格复用父网格的轨道定义，但它**不继承父级的 gap**。也就是说，即使父容器设了 gap: 1rem，子网格（display: grid + grid-template-rows: subgrid）内部依然默认无间隙，除非显式声明自己的 gap。
原因在于：gap 是容器自身的布局属性，不是可继承的样式。subgrid 的“继承”只发生在轨道尺寸（track sizing）层面，而非间隙逻辑。
- subgrid 子项若需间隙，必须在 subgrid 容器上单独写
gap，哪怕值和父级一样 - 如果父网格用
gap: 1rem，子网格用gap: 0.5rem，二者完全独立，不会混合或缩放 - 目前 Chrome 和 Firefox 支持 subgrid，但 Safari 仍不支持——这意味着你写的 subgrid + gap 在 Safari 里会降级成普通 grid，间隙行为可能突变
