应使用 CSS 变量 --gap 统一管理网格与 Flex 布局间距，定义于 :root 并通过媒体查询响应式覆盖，避免硬编码、嵌套 calc 不稳定、组件级污染及 IE11 兼容问题，辅以合理 fallback 和文档说明。
用 --gap 变量统一管理网格间距，别在每个 grid-gap 里硬编码
硬写 gap: 16px 或 grid-gap: 24px 到多个容器里，改一次要搜七八个文件。CSS变量真正起作用的地方，是把间距这种高频变更值抽成全局可维护的入口。
- 所有网格容器统一用
gap: var(--gap)，而不是分散写死数值 - 在
:root里定义基础值：:root { --gap: 16px; }，需要响应式时用@media覆盖 - 避免用
calc(var(--gap) * 2)做衍生计算——部分旧版 Safari 对变量嵌套 calc 支持不稳定 - 如果项目用 PostCSS，
postcss-custom-properties会把变量编译为静态值，但失去运行时动态切换能力，得按需取舍
响应式中修改 --gap 要小心媒体查询顺序和 specificity
很多人写了 @media (min-width: 768px) { :root { --gap: 24px; } }，却发现小屏下也用了 24px。问题不在写法，而在 CSS 加载顺序和选择器权重。
-
:root的媒体查询必须放在默认定义之后，否则会被覆盖（CSS 是自上而下解析） - 不要在组件级样式里用
.card { --gap: 8px; }覆盖全局——这会让父容器的gap失效，因为子元素不继承该变量作用域 - 移动端优先时，先设小值，再在大屏媒体查询里放大；反之亦然，避免来回覆盖
- 调试时用浏览器开发者工具直接编辑
:root下的--gap，看实时效果，比反复刷新快得多
Grid 和 Flex 混用时，gap 变量不能跨布局复用？其实可以
Flex 容器也支持 gap（Chrome 84+、Firefox 63+、Safari 14.1+），和 Grid 的 gap 行为一致。只要浏览器支持，一个 --gap 就能管住两者。
- 检查目标环境：若需兼容 Safari 14.0 或更早，
gap在 Flex 中无效，得回退到margin+:nth-child模拟 - 不要给 Flex 写
grid-gap——它只对 Grid 生效，且已废弃 - 用
display: grid和display: flex切换布局时，只要都用gap: var(--gap)，视觉节奏就一致 - 注意：IE11 完全不支持
gap，也不支持 CSS 变量，这类项目建议绕过变量方案，直接用预处理器变量或 JS 注入
组件库中暴露 --gap 作为定制入口，但别让它失控
如果你在封装卡片、列表、表单等组件，把 --gap 当作外部可配置项很实用，但得划清边界。
立即学习“前端免费学习笔记（深入）”；
- 组件内部用
gap: var(--gap, 12px)，提供合理 fallback，避免父级没设变量时布局崩塌 - 禁止在组件内写
:root { --gap: ... }—— 这会污染全局，多个组件同时加载可能互相覆盖 - 如果组件需要不同层级的间距（比如外边距 vs 内部项间距），定义更细粒度变量：
--card-gap、--card-padding，而非强塞进同一个--gap - 文档里明确写出：“该组件读取
--gap，但不设置它”，避免使用者误以为这是组件副作用
改一个变量就能批量调整数十个网格的呼吸感，听起来很美。但真正在大型项目里，--gap 往往和字体缩放、容器最大宽度、甚至 JS 动画时长耦合在一起——动它之前，先看看有没有脚本在监听 getComputedStyle 读取这个值。
