用css自定义属性+@media覆盖比多套gap类更灵活，但需注意变量作用域与继承链；应将变量定义在具体容器上（如.grid-main），避免仅依赖:root，且gap与margin混用时须用calc()包裹var()。
直接说结论：用 CSS 自定义属性 + @media 覆盖变量值，比写死多套 gap 类更灵活，但必须注意变量作用域和继承链——否则在子元素里读不到新值。
为什么不能只靠 :root 里定义一个变量？
很多人一上来就在 :root 里写 --gutter: 12px，然后指望所有断点都靠改这一个值生效。问题在于：@media 里修改 :root 变量是有效的，但如果你的网格容器不是直接从 :root 继承（比如它被套在某个 .sidebar 里，而该区域用了 font-size: 0.875rem），那 calc(1 * var(--gutter)) 就会因继承链中断而 fallback 到初始值。
实操建议：
- 把间距变量定义在具体容器选择器上，例如
.grid-main { --gutter: 20px; }，再在@media里覆盖它 - 避免跨层级复用同一变量名，不同区域（主区/侧边栏/弹窗）用不同前缀，如
--gutter-main、--gutter-sidebar - 用
getComputedStyle(el).getPropertyValue('--gutter')在控制台验证当前元素是否真读到了预期值
gap 和 margin 混用时，自定义属性容易失效的场景
Grid 或 Flex 容器设了 gap: var(--gutter) 没问题，但一旦你同时给子项加 margin（比如为了兼容 IE 或特殊对齐），就可能触发层叠冲突：浏览器先解析 margin，再算 gap，而 var(--gutter) 在 margin 里不生效（CSS 不支持在 margin 中直接用 var() 做计算单位，除非配合 calc()）。
常见错误写法：.item { margin: 0 var(--gutter); } → 这会报错或忽略
正确写法：
-
.item { margin: 0 calc(var(--gutter) / 2); }（需确保--gutter是带单位的，如20px） - 更稳妥的做法是：只用
gap控制间距，禁用子项margin，避免双控打架 - 如果必须用
margin（比如要让首尾项贴边），那就用:first-child和:last-child单独清除，别依赖变量自动推导
Tailwind 用户想用自定义间距变量？别动 theme.spacing，改 theme.extend
Tailwind 默认的 spacing 是静态映射（'4': '1rem'），你往里塞 var(--gutter) 会编译失败。真正能动态的，是通过 extend 注入带 CSS 变量的工具类：
module.exports = {
theme: {
extend: {
spacing: {
'dynamic-gutter': 'var(--gutter, 12px)',
}
}
}
}
然后在 HTML 中这样用：<div class="grid gap-dynamic-gutter">，再配合 <code>@media 修改 --gutter 值。
注意点：
- 这个
gap-dynamic-gutter类不会出现在默认的gap-*提示里，编辑器无补全，得自己记 - 必须确保
--gutter在应用该类的元素或其任意祖先上已声明，否则 fallback 到12px - 不要试图在
theme.spacing主对象里写var()，PostCSS 插件不处理运行时变量
最易被忽略的一点：gap 的响应式行为本身不触发重排，但如果你用 JS 动态改 --gutter，某些旧版 Safari 会卡住不刷新间距——务必在改完后对容器触发一次 el.style.transform = 'scale(1)' 强制重绘。
