subgrid是css grid level 2原生特性，scss仅用于组织代码；其生效前提为父容器明确定义轨道、子元素为直接子项且显式声明span范围，否则继承链断裂。
SCSS 本身不提供 subgrid 支持，subgrid 是纯 CSS Grid Level 2 的特性；你用 SCSS 只是写得更简洁，但最终生效的仍是浏览器解析的 grid-template-columns: subgrid 这类原生声明。关键不是“怎么用 SCSS 实现 subgrid”，而是“怎么用 SCSS 组织和维护 subgrid 布局代码”，避免重复、错位、响应式断裂。
为什么直接套用 SCSS mixin 容易让 subgrid 失效
很多人一上来就写 @mixin subgrid-cols() { grid-template-columns: subgrid; }，结果发现子元素完全不对齐。问题不在 mixin，而在调用上下文缺失：
- 父容器没定义
grid-template-columns（比如只用了grid-auto-columns或repeat(auto-fit, ...)），子元素设subgrid就退化为none - 中间层（如卡片容器）漏写了
grid-template-rows: subgrid，导致内部文字/按钮无法对齐顶层行轨道 - 父容器用了
gap，而子元素没用grid-column: span N覆盖完整列跨度，隐式轨道被插入，轨道映射链断裂
用 SCSS 变量 + 精确继承控制列轨道
把父网格的列定义抽成变量，确保所有层级引用同一份定义，避免手动写错或响应式不一致：
$grid-cols: 1fr 2fr 1fr;
$grid-gap: 1rem;
.dashboard {
display: grid;
grid-template-columns: $grid-cols;
gap: $grid-gap;
}
.card {
grid-column: span 3; // 必须显式跨满，否则 gap 插入隐式轨道
display: grid;
grid-template-columns: subgrid; // 继承 $grid-cols
grid-template-rows: auto 1fr auto; // 行可自定义，列必须 subgrid
}
注意：grid-column: span 3 不是可选的——它保证 .card 占据父网格全部列轨道，否则浏览器会为未覆盖区域生成隐式轨道，subgrid 映射失效。
三层嵌套时 SCSS 如何保持轨道穿透
比如仪表盘 → 卡片组 → 卡片 → 图标+文字，要求图标始终对齐顶层第一列线。这时中间层（卡片组）必须也是 subgrid，且不能引入任何干扰：
- 卡片组（
.card-group）必须同时声明grid-template-columns: subgrid和grid-template-rows: subgrid - 禁用
gap：如果要用间距，改用margin或父容器的gap，中间层留白必须由外层统一控制 - 禁止空元素或
grid-auto-rows：它们会创建无法映射的隐式行轨道 - 命名线（如
[icon]）只能在最外层定义，孙子层通过grid-column: icon直接锚定
SCSS 中可封装为：
@mixin subgrid-passthrough {
grid-template-columns: subgrid;
grid-template-rows: subgrid;
// 不设 gap，不设 auto-rows/columns
}
.card-group {
@include subgrid-passthrough;
}
响应式断点里 subgrid 最容易崩的点
Subgrid 继承的是“当前计算出的轨道”，不是媒体查询规则。所以：
- ✅ 正确：只在父容器上改
grid-template-columns，例如@media (min-width: 768px) { .dashboard { grid-template-columns: 1fr 1fr 1fr 1fr; } } - ❌ 错误：在子层加媒体查询重写
grid-template-columns，比如.card { @media (min-width: 768px) { grid-template-columns: 1fr 1fr; } }—— 这等于主动切断继承 - ⚠️ 注意：Chrome/Firefox 的 Grid Inspector 中勾选 “Show line names”，能立刻看到命名线是否来自顶层容器；如果看不到，说明 subgrid 没生效或轨道未定义
真正难的不是写对语法，而是理解 subgrid 是一条轨道映射链：父定义轨道 → 子声明继承 → 孙辈直接使用。中间任何一层加了 gap、auto、span 不匹配、媒体查询乱插，整条链就断了。SCSS 只是帮你管住变量和结构，别让它掩盖了这个物理事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
