subgrid 不继承父级 gap，需在子网格上显式设置 column-gap 或 gap；自定义属性可统一维护间距值，但非语义共享；扁平化结构能使所有项受父 gap 天然控制。
subgrid 不继承父级的列间距（gap），这是最常被误解的一点。你写了 grid-template-columns: subgrid，但子网格里的项之间依然没间隙？不是 bug，是规范行为 —— gap 只作用于 **grid 容器的直接子项**，而 subgrid 容器本身是父网格的一个子项，它的子项（即孙级元素）不在父网格的 gap 作用范围内。
为什么 gap 在 subgrid 内不生效
父容器设了 gap: 1rem，只影响它自己的直系子元素（比如多个 .row 之间的垂直间距），但不会“穿透”到 .row 内部。即使 .row 是 display: grid; grid-template-columns: subgrid，它的子元素（如 label 和 input）仍属于“孙级”，不受父 gap 管控。
-
gap不继承，也不传播，浏览器明确不支持跨层级传递 - 子网格启用
subgrid后，自身仍是父网格的一个 item，它的布局上下文已切换为轨道继承，而非 gap 继承 - computed 样式中查不到
gap值，不是失效，是根本没定义在该层级
怎么让子网格内元素也有列间距
必须在子网格上显式设置 gap（或 column-gap），且值需与父级保持一致 —— 但注意：这不是“共享”，而是手动同步。
- 父容器：
gap: 12px→ 控制 .row 之间的间距 - 子网格（.row）：
column-gap: 12px→ 控制其内部子项（如label、input）的水平间距 - 不能写
gap: 12px在子网格上，除非你也需要行间距；多数表单场景只需column-gap - 若父用的是响应式
gap: clamp(8px, 2vw, 16px)，子网格也得照抄这个计算式，CSS 不提供变量自动绑定
用 CSS 自定义属性减少重复维护
避免硬编码多次 gap 值，用 --grid-gap 统一管理：
.list {
--grid-gap: 12px;
display: grid;
grid-template-columns: auto 1fr;
gap: var(--grid-gap);
}
<p>.row {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
column-gap: var(--grid-gap); /<em> 关键：复用同一变量 </em>/
}</p>
这样改一个变量，父子层的视觉间距就同步更新。但要注意：
- 自定义属性不解决语义问题 —— 它只是方便维护，不是真正的“共享”
- 如果父容器响应式切换了
--grid-gap（比如媒体查询里重设），子网格会自动响应，前提是它在同一个作用域内（未被var()作用域隔离） - 不要指望
subgrid自动读取父级gap计算值；浏览器不解析、不推导、不桥接
替代方案：放弃 subgrid，改用 flat grid 结构
如果你真正想要的是“所有内容项（包括嵌套块）都受同一套 gap 控制”，那 subgrid 本身就不是目标工具。更轻量的做法是扁平化结构：
- 把原本放在
.row内的label和input提升为.list的直接子项 - 用
grid-row和命名线（如grid-row: label）控制它们落在哪一行 - 此时所有项都是父网格直系子项，
gap天然生效，无需同步、无穿透问题 - 缺点是 HTML 结构语义变弱，但对纯表单/卡片列表类场景，可读性影响有限
真正容易被忽略的是：gap 和 subgrid 属于不同抽象层级 —— 前者管“项间空白”，后者管“轨道复用”。强行让它们耦合，反而增加维护成本。该手动同步时就同步，该重构结构时就重构，别卡在“以为 subgrid 能做更多”的预期里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
