row-gap 和 column-gap 仅在 display: grid 或 inline-grid 容器上生效；不支持百分比单位；gap 简写会完全覆盖单独声明的 row-gap/column-gap；firefox 中 subgrid 对 gap 支持不完整。
row-gap 和 column-gap 不生效？检查 display 类型是否为 grid 或 inline-grid
这两个属性只在 display: grid 或 display: inline-grid 的容器上起作用，设成 flex、block 或漏写 display 都会完全无效——浏览器压根不解析它们。
- 确认父容器有
display: grid，且没被其他 CSS（比如重置样式）意外覆盖 - 如果用的是
grid-template-areas，间隙依然生效；但若子元素用了grid-column: span 2跨列，column-gap仍只作用于列与列之间，不影响跨列项内部 - 旧版 Safari（≤15.4）对
row-gap在单行网格中偶有渲染延迟，加个transform: translateZ(0)可临时绕过
gap 简写覆盖 row-gap/column-gap？优先级和继承逻辑要理清
gap 是 row-gap 和 column-gap 的简写，写一次就同时设置两者。但它不是“叠加”，而是**完全覆盖**——只要声明了 gap，之前单独写的 row-gap 或 column-gap 就失效了。
-
gap: 10px 20px→row-gap: 10px,column-gap: 20px -
gap: 12px→ 两者都为12px，等价于row-gap: 12px; column-gap: 12px - 不要混用：比如先写
row-gap: 8px，再写gap: 16px，后者会把row-gap也改成16px - 注意继承：
gap不继承，但子网格（嵌套display: grid的后代）有自己的间隙，和父级无关
百分比 gap 值为什么不起作用？单位限制很严格
row-gap 和 column-gap **不支持百分比单位**（%），写 row-gap: 5% 会被浏览器直接忽略——连报错都不会有，静默失败。
- 只接受
length（如px、em、rem、vh）或normal（默认值，约等于1em） -
vh/vmin可以用，适合响应式；但%不行，别试 - 如果想实现“按容器宽度比例留空”，得用
grid-template-columns配合fr单位或calc()模拟，gap 本身做不到
Firefox 中 gap 在 subgrid 下表现异常？目前 subgrid 对 gap 支持不完整
Firefox（截至 128）对 subgrid 的 gap 支持有限：父网格设了 gap，子网格用 grid-row: subgrid 后，间隙可能消失或错位，这不是你代码写错了，是浏览器实现还没跟上标准。
- Chrome/Edge 已支持 subgrid + gap，Firefox 仍处于部分支持状态
- 临时方案：避免在 subgrid 容器上依赖
gap，改用padding或伪元素模拟间距 - 检查
caniuse.com上css-subgrid和mdn-css_properties_gap的交叉兼容表，别只看单项支持率
gap 看似简单，但真正在复杂嵌套、跨浏览器、响应式场景里调，很容易卡在“明明写了却没反应”上——问题往往不在 gap 本身，而在 display 类型、简写覆盖、单位误用，或者你以为它该起作用的地方，其实标准还没覆盖到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
