gap必须配合带单位的CSS变量才能生效，如--gap: 16px；纯数字或带引号字符串无效，Safari 14.1+才完整支持，嵌套网格需各自声明变量，gap不支持动画。
gap 必须配合带单位的 CSS 变量才能生效
直接写 gap: var(--g) 会静默失败，除非 --g 的值本身已含单位（如 12px、1.5rem）。纯数字 12 或带引号字符串 "12px" 都不合法——CSS 不做运行时单位拼接，也不会报错，DevTools 里该行会被划掉。
常见错误写法：
-
--g: 12; gap: var(--g) px;→ 单位拆开，语法非法 -
--g: calc(12 * 1px);→calc()在变量定义中不被解析为长度值，仍无效 -
gap: calc(var(--g));→ 多余且无意义，var(--g)已是完整值
正确做法：在 :root 或具体选择器里直接定义带单位的变量，例如：
html {
--gap: 16px;
}
.grid {
gap: var(--gap);
}
响应式切换必须覆盖变量值，而非重写 gap
媒体查询里写 @media (min-width: 768px) { .grid { gap: 24px; } } 看似可行，但会丢失变量控制能力。真要动态，就得在媒体查询里改变量本身：
- 全局切换：在
@media中覆盖:root的--gap - 组件级隔离：给不同网格容器加类名（如
.card-grid），在对应选择器里定义--gap，避免互相干扰 - 内联覆盖：，配合
gap: var(--gap)实现实例级控制注意：Safari 14.1+ 才完整支持
gap绑定变量，旧版需拆成row-gap: var(--row-gap)和column-gap: var(--col-gap)分别设置。嵌套网格必须各自声明变量
gap不继承，外层设了--gap: 24px对内层网格完全无效。如果一个.grid里面还套了另一个.grid，后者必须显式定义自己的--gap，否则 fallback 到浏览器默认（通常是 0）。容易忽略的点：
- 变量作用域没写对：比如在
.grid > .item里定义--gap，但gap是容器属性，变量必须挂在容器上 - 嵌套层级深时，用 DevTools 检查变量是否被正确继承或覆盖，别只看最终计算值
- 若用 CSS-in-JS 或框架 scoped style，确认变量注入时机和作用域是否匹配
别指望 gap 触发动画或逐行差异
gap被规范定义为原子属性，不支持插值动画——哪怕你写了transition: gap 0.3s，JS 改element.style.gap也会瞬间跳变，不会过渡。想实现“第1–2行间距大、第2–3行小”这类视觉节奏？
gap无能为力。可行方案只有：- 用
grid-template-rows: auto 16px auto 4px auto插入显式空轨道，再靠grid-row控制项目落点 - 给子项包一层 ，用子容器的
margin-bottom控制下间距- 用
::after在特定项后插入固定高度伪元素绝对别用
transform: translateY()模拟间隙——它不占布局空间，后续元素会塌上去，破坏网格流。 - 用
- 变量作用域没写对：比如在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
