--gap变量必须带单位、定义在网格容器选择器内，旧版Safari需@supports降级；响应式用@media而非JS；clamp()三参数单位须一致；嵌套网格需各自声明。
直接用 --gap 变量配合 gap 属性就能实现，但必须确保变量带单位、定义在网格容器上、响应式靠 @media 覆盖而非 JS —— 否则在 Safari 或小屏下大概率静默失效。
gap: var(--gap) 为什么在移动端不生效？
常见错误是变量值没单位或作用域错位。比如写 :root { --gap: 12; }，然后在 .grid 里写 gap: var(--gap);，这在所有浏览器都无效，因为 12 不是合法长度值；又或者变量只挂全局，但网格容器没继承上下文，Safari 14.1+ 才支持跨作用域解析 var() 在 gap 中的使用。
-
--gap的值必须含单位：写成--gap: 12px或--gap: 0.75rem，不能是纯数字、字符串或无单位数值 - 变量必须定义在目标容器选择器内（如
.card-grid { --gap: 16px; }），而不是只靠:root一劳永逸 - 旧版 Safari（≤ 16.4）和部分 Chrome（≤ 115）不支持
gap: var(--gap)，需用@supports (gap: 0)包裹并提供降级 fallback
移动端响应式边距怎么用媒体查询安全切换？
别在 JS 里监听 resize 然后调 setProperty，既卡顿又难维护。移动端断点少、变化规律明确，@media 是最稳的方案。
- 推荐三个断点：
@media (max-width: 576px)（窄屏手机）、@media (min-width: 577px) and (max-width: 991px)（平板）、@media (min-width: 992px)（桌面） - 变量重设写在组件选择器里，避免污染全局：
.product-grid { --gap: 12px; } @media (min-width: 577px) { .product-grid { --gap: 16px; } } - 不要每个类都重复写媒体查询，统一变量名（如始终叫
--gap），才能让所有引用var(--gap)的地方自动同步
想让边距随屏幕平滑缩放，clamp() 怎么写才不出错？
clamp() 是唯一免 JS 实现连续响应的方案，但它对单位极其敏感：三个参数单位必须完全一致，否则部分浏览器（尤其是旧版 Safari）会直接忽略整个 gap 声明。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
--gap: clamp(8px, 3vw, 24px);（全为px或全为vw） - 危险写法：
--gap: clamp(0.5rem, 3vw, 1.5rem);（rem和vw混用，Chrome 可能渲染，Safari 直接失效） - 生产环境建议兜底：
.grid { --gap: 16px; gap: var(--gap); } @media (max-width: 576px) { .grid { --gap: 12px; } }，再加一层clamp()仅作增强
真正容易被忽略的是嵌套网格：外层设了 --gap，内层网格不会继承，必须各自声明变量；还有 gap 不继承、不触发 margin collapse、不和 padding 混合计算——它只管“直系子项之间”，多一层 wrapper 就得重新设。
