gap属性必须带单位且变量需定义在grid或flex容器上，--gap值须含单位（如16px），不可为纯数字或字符串；推荐写法为.grid { --gap: 16px; gap: var(--gap); }，禁用grid-gap；响应式应通过@media重设变量而非JS；clamp()需单位统一，旧版Safari需兜底；Flex gap需注意浏览器兼容性，嵌套容器需各自设变量。
gap属性必须带单位，且变量得定义在网格或Flex容器上
直接写 gap: var(--gap) 会静默失效，除非 --gap 的值本身包含单位（如 12px 或 1rem），不能是纯数字 12 或带引号字符串 "12px"。变量必须声明在 display: grid 或 display: flex 的直接容器上——写在 :root 里看似通用，但一旦容器有内联样式或更高优先级规则，就可能被覆盖。
- 推荐写法：
.grid { --gap: 16px; gap: var(--gap); } - 错误写法：
:root { --gap: 16; } .grid { gap: var(--gap); }（缺单位，无效） - 别用已废弃的
grid-gap，只用gap；Safari 14.1+ 才完整支持变量绑定
响应式间隙别靠JS监听resize，用@media重设变量更稳
JS 动态改 document.documentElement.style.setProperty('--gap', '8px') 容易触发重排、丢失CSS优先级，还难维护。真正轻量又可靠的做法，是在媒体查询里直接覆盖变量值，让所有引用 var(--gap) 的地方自动响应。
- 基础值写在组件选择器里更安全：
.card-grid { --gap: 24px; }，避免污染全局 - 断点切换只需：
@media (max-width: 767px) { .card-grid { --gap: 12px; } } - 别在每个类里重复写媒体查询，统一变量名，样式复用才成立
想让间隙随视口平滑缩放？用clamp()但别混单位
clamp() 是唯一能免JS实现连续响应的方案，但它对单位极其敏感：三个参数必须单位一致，否则部分浏览器解析异常，gap 直接失效。
- 正确：
--gap: clamp(8px, 4vw, 24px); - 危险：
--gap: clamp(0.5rem, 4vw, 1.5rem);（rem 和 vw 混用） - 注意：旧版 Safari 对
clamp()在gap中的支持不稳定，生产环境建议先用变量 + 媒体查询兜底
Flex布局用gap前先确认浏览器支持，旧版得降级
Chrome 127+、Firefox 111+ 支持 flex gap，但 Safari ≤ 16.4 和 Chrome ≤ 115 默认不生效。强行写 display: inline-flex; gap: var(--gap) 在这些环境下等于没写。
立即学习“前端免费学习笔记（深入）”；
- 兼容方案：用 PostCSS 插件
flex-gap-polyfill，它把gap编译成基于calc()和负边距的 margin 系统 - 手动降级写法（不推荐）：
.flex > * + * { margin-left: var(--gap); }，但需额外处理首尾、换行、justify-content 行为 - 关键提醒：gap 不继承，嵌套 Flex 容器必须各自设变量，外层
--gap不会影响内层
实际调的时候，最常卡住的地方不在语法，而在变量作用域是否精准、单位是否显式、以及浏览器对 gap 的底层支持断层——尤其是 Safari 旧版本和移动端真机测试时的像素级误差。
