gap仅支持一至两个值（行距、列距），不适用于Flex布局（兼容性差），不可用百分比（除非父容器尺寸明确），会覆盖grid-row-gap等旧属性。
gap 能同时设行距和列距，但别用空格分隔
很多人写 gap: 20px 10px 想模仿 margin 的「上下 右左」顺序，结果发现列距没生效——gap 不是四值语法。gap 只接受一到两个值：gap: <row-gap></row-gap> 或 gap: <row-gap><column-gap></column-gap></row-gap>。第二个值才是列距，不是“右距”。
- 写成
gap: 12px→ 行距 = 列距 = 12px - 写成
gap: 12px 8px→ 行距 = 12px，列距 = 8px（不是“上下左右”） - 写成
gap: 12px 8px 6px→ 无效，浏览器会忽略整条声明
gap 在 Flex 布局里完全不生效
gap 是 Grid 和 Multi-column 的原生属性，Flex 布局直到 display: flex 的最新规范才被部分支持，但兼容性差：Chrome 104+、Firefox 111+ 才稳定支持，Safari 16.4+ 才开始支持。老项目或需兼容 iOS 15 以下的场景，gap 在 Flex 中直接被忽略。
- 检查实际运行环境：用
getComputedStyle(el).gap看返回值是否为空字符串 - Flex 下替代方案仍是
margin（注意首项/末项额外处理）或伪元素模拟间距 - 别在 Flex 容器上写
gap还以为“写了就有效”，它真不会起作用
gap 不能用百分比值（除非父容器有明确尺寸）
gap 支持 px、rem、em、calc()，但百分比值（如 gap: 2%）只有在 Grid 容器本身设置了明确的 width / height 时才可能计算出结果；否则，多数浏览器会将百分比视为无效并回退为 normal（等效于 0）。
- Grid 容器是
width: 100%且父级无固定宽？那gap: 2%实际无效 -
gap: calc(1vw + 4px)是安全的，vw基于视口，不依赖父容器尺寸 - 想响应式缩放间距，优先用
rem配合根字体缩放，比百分比更可控
gap 会覆盖 grid-row-gap / grid-column-gap，但旧写法仍可能干扰
gap 是 grid-row-gap 和 grid-column-gap 的合并简写，只要 gap 出现在样式表中靠后位置，就会覆盖前面的独立声明。但问题在于：如果旧代码里同时写了 grid-row-gap 和 gap，而你只改了 gap，却忘了删掉已失效的 grid-row-gap，后续维护者可能误以为那个值还在起作用。
立即学习“前端免费学习笔记（深入）”；
- 查 DevTools 的 Computed 面板，看最终生效的是哪条声明
- 上线前建议全局搜索
grid-row-gap和grid-column-gap，替换成gap并验证效果 - CSS 预处理器里如果用变量控制间距，确保所有地方统一走
gap，避免混用导致意外交互
gap 看似简单，真正卡住人的往往是「以为它像 margin 一样自由」或者「在 Flex 里白写了还看不出错」——这两点最容易漏检，也最难从报错里发现。
