subgrid不是display值，而是仅在grid-template-columns/rows中作为关键字生效的轨道引用机制；必须配合display: grid使用，且父容器需显式定义行列轨道，子元素须为直接子项并正确定位。
subgrid 不是 display 值，也不是独立布局模式——它只在 grid-template-columns 或 grid-template-rows 中作为关键字生效，且必须配合 display: grid 使用。
为什么写了 display: subgrid 会失效
这是最常踩的坑：CSS Grid Level 2 草案早期确实有过 display: subgrid 语法，但早已被移除。现在所有浏览器（Chrome 114+、Firefox 110+、Safari 16+）只认 grid-template-columns: subgrid 和/或 grid-template-rows: subgrid。
常见错误现象：
- DevTools 里
grid-template-columns显示为none，说明该声明被忽略 - 子元素看起来“差不多对齐”，实则列线错位（尤其在多卡片场景下标题长度不一时）
- 父容器用了
repeat(auto-fit, ...)或grid-auto-columns，子元素的subgrid直接不生效
父容器必须显式定义轨道
subgrid 只能映射父级**显式声明的轨道**，隐式生成的轨道无法继承。
正确写法示例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* ✅ 显式定义 */
grid-template-rows: auto 1fr auto; /* ✅ 显式定义 */
gap: 1rem;
}
以下写法会导致 subgrid 失效：
-
grid-template-columns: repeat(3, 1fr)→ ✅ 合法（repeat()是显式函数） -
grid-auto-columns: 1fr→ ❌ 隐式，subgrid无法引用 -
grid-template-columns: minmax(200px, 1fr) 1fr→ ✅ 合法
子元素必须是父网格的直接子项且正确定位
subgrid 只作用于 DOM 直接子节点，并且该子节点必须在父网格中被分配了明确位置（即有 grid-column 或 grid-row 值）。
典型错误场景：
- 中间加了一层 wrapper：
<div class="grid-container"><div class="wrapper"><div class="card">...</div></div></div>→.card不是直接子项，subgrid不触发 -
.card { grid-column: 1; }但父容器共 3 列 → 子元素只占第 1 列，其余列轨道未被覆盖，subgrid映射中断 - 正确做法：
.card { grid-column: 1 / -1; }或grid-column: span 3;
如果父容器设了 gap，而子元素没横跨全部列，浏览器会插入隐式轨道容纳 gap，导致子元素实际对齐的是这些“被扰动后”的轨道，而非原始定义。
如何验证 subgrid 是否真正生效
不能只靠肉眼判断是否“看起来对齐”。必须用 DevTools 检查底层映射：
- 选中子元素 → Styles 面板 → 展开 computed → 查找
grid-template-columns - 值应明确显示为
subgr（Chrome/Firefox 缩写），不是none或具体数值 - 再看
grid-column-start和grid-column-end是否与父容器轨道数匹配（如父有 3 列，子应为1 / 4或1 / -1） - 若子元素内部子项（如
.card-title）设置了grid-column: 1却没对齐父容器第 1 列，大概率是subgrid没生效，退化为普通 grid
真正难的不是写对语法，而是理解 subgrid 是一种**轨道引用机制**，不是样式继承；一旦中间某层 DOM、定位或 gap 打断了这条引用链，就全盘失效——而且往往悄无声息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
