scss中grid-template-rows: subgrid没效果，是因为父容器未显式定义grid-template-rows（如auto 1fr auto），而仅用gap、grid-auto-rows或repeat(auto-fit)等隐式方式生成行轨道，导致无轨道可继承，浏览器静默丢弃该声明并显示为none。
SCSS里写grid-template-rows: subgrid为什么没效果？
90% 的问题出在父容器没定义显式行轨道。SCSS 编译后仍是 CSS，它不会帮你补上缺失的 grid-template-rows。Subgrid 不继承 grid-auto-rows、不响应 gap 插入的隐式行，只认你亲手写的模板。浏览器看到父级没模板，就静默丢弃子元素的 subgrid 声明，computed 样式里显示为 none。
常见失效组合：
- 父容器只写了
display: grid和gap: 12px—— 没grid-template-rows，无轨道可继 - 父用了
grid-template-rows: repeat(auto-fit, minmax(40px, 1fr))—— 这是列函数，对行无效，且仍是隐式生成 - 子元素被包在
.table-row-wrapper里，而该 wrapper 没设display: grid—— 它不是父网格的直接子项
@include 能封装 subgrid 吗？别试了
SCSS 的 mixin 可以复用声明，但不能绕过 Subgrid 的硬性约束。比如你写：
@mixin subgrid-rows {
display: grid;
grid-template-rows: subgrid;
}
这本身没问题，但调用它前，父容器必须已定义 grid-template-rows，且子元素必须是父网格的**直接子节点**。SCSS 不会检查 DOM 结构，也不会修正 display: contents 或空文本节点带来的中断。
真正要封装的，是整条链路：
- 父容器的
grid-template-rows（必须显式，如auto 1fr auto） - 子元素的
grid-row: span N（N 必须等于父行数） - 子元素的
grid-template-rows: subgrid - 子元素内各部分的
grid-row定位（如label { grid-row: 1; }）
三层表格嵌套时，孙子行怎么对齐顶层？
Subgrid 只作用于直接子元素。孙子层默认对齐的是中间层的轨道，不是顶层。想“穿透”对齐，中间层必须同时满足两个条件：
- 中间层（如
.cell-content）必须设display: grid，且同时声明grid-template-rows: subgrid和grid-template-columns: subgrid - 中间层禁止使用
gap、grid-auto-rows、空<div></div>或任何可能插入隐式轨道的属性
否则，轨道映射链就断了。Chrome/Firefox Grid Inspector 中勾选 “Show line names”，能一眼看出命名线是否来自顶层容器——这是最可靠的验证方式。
响应式表格中 subgrid 怎么不掉链子？
Subgrid 本身不响应，响应逻辑必须由父网格驱动。子网格只是“镜像”，不能独立 media query 切换轨道。
正确做法：
- 只在父容器（如
.data-table）上用媒体查询改grid-template-rows，例如：@media (max-width: 768px) { grid-template-rows: auto 1fr; } - 子元素保持
grid-template-rows: subgrid不变，它会自动跟随变化
错误做法：
- 在子元素上写
@media改自己的grid-template-rows—— 那就脱离了 subgrid，变成独立网格 - 用
visibility: hidden隐藏某行内容 —— 空行仍占位，破坏对齐前提；应改用display: none
真正难的不是写对那一行 grid-template-rows: subgrid，而是确保从父容器到子元素的 DOM 层级干净、轨道定义显式、媒体查询不干扰继承链——空文本节点、display: contents、甚至 fieldset 的默认样式，都可能悄悄打断这条链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
