subgrid 是 grid-template-columns/rows 的关键字而非 display 属性；必须配合 display: grid 使用，且仅适用于父网格直接子项，要求父容器显式定义轨道、子元素正确定位并避免中间层 gap 干扰。
subgrid 不是 display 属性，而是 grid-template-* 的关键字
很多人一上来就写 display: subgrid，这是错的——该语法早在 CSS Grid Level 2 草案阶段就被移除了。现在唯一合法用法是：grid-template-columns: subgrid 或 grid-template-rows: subgrid。它必须配合 display: grid 使用，且只能作用于**已经是父网格直接子项**的元素。
常见错误现象：子元素加了 display: grid 但列没对齐，是因为漏写了 grid-template-columns: subgrid；或者写了但父容器没定义显式轨道，导致该声明被忽略（computed 样式里显示为 none）。
- 父容器必须用
grid-template-columns或grid-template-rows显式声明轨道，例如1fr max-content 2fr；grid-auto-columns、repeat(auto-fit, ...)这类隐式生成的轨道无法被 subgrid 引用 - 子元素必须是父网格的直接子项（即 DOM 直接子节点 + 在父网格中被分配了位置），否则
grid-column: 1 / -1之类定位缺失会导致它退化为普通 grid 容器 - 若只写
grid-template-columns: subgrid而没设grid-template-rows，行方向仍是独立 grid；反之亦然
父容器 gap 会切断 subgrid 映射链
当父容器设置了 gap，而子元素又没用 grid-column: 1 / -1（或等价的 grid-column: span N）横跨全部列时，浏览器会为子元素插入隐式轨道来容纳 gap，导致 subgrid 失效——此时子元素实际对齐的是这些“中间插入的轨道”，而非父级原始定义。
典型场景：表格行封装成 .row，父容器 .container 设了 gap: 12px，但 .row 只写了 grid-column: 1，结果每行首列宽度各自计算，不再统一。
立即学习“前端免费学习笔记（深入）”；
- 解决方法：给子元素明确声明
grid-column: 1 / -1（或具体数字，如span 3），确保它覆盖整行所有列轨道 - 如果父容器需要视觉间距，优先用
gap；子元素内部需间距时，改用padding或子项自身的gap，避免干扰轨道映射 - 三层嵌套时，中间层也禁用
gap，否则孙子层的subgrid对齐的是中间层“被 gap 扰动后”的轨道，不是顶层原始定义
如何验证 subgrid 是否真正生效
不能只看页面是否“看起来对齐了”——很多失效情况（比如父轨道未显式定义）下，子元素会退化为普通 grid，靠巧合撑开宽度，实则列线已错位。必须通过 DevTools 检查底层映射关系。
- 在 Chrome 或 Firefox 的 Elements 面板 → Styles → computed，查找
grid-template-columns，值应明确显示为subgrid，而不是none或空字符串 - 打开 Layout → Grid 面板，勾选 “Show line names”，确认显示的列线名称来自父容器（如
[col-start]、[content]），而非子元素自定义的命名线 - 用
@supports (grid-template-columns: subgrid)做支持检测时注意：Safari 16.3 及更早版本返回true但行为异常；Android WebView 声称支持却常忽略subgrid关键字，建议搭配实际渲染测试
max-content 列宽同步必须依赖父级显式轨道
想让多行的首列自动按最长内容对齐（比如表格中“标签”列），关键不是子元素设 width: max-content，而是把 max-content 写进父容器的 grid-template-columns，再由子元素用 subgrid 继承。
常见误操作：父容器用 grid-auto-columns: max-content，子元素写 grid-template-columns: subgrid ——这无效，因为 grid-auto-columns 不产生可继承的显式轨道。
- 正确写法示例：
.container { grid-template-columns: max-content 1fr; }+.row { grid-template-columns: subgrid; grid-column: 1 / -1; } - 如果首列内容差异极大（如空字符串 vs 长文本），
max-content会以最长项为准，其他行该列留白，这是预期行为；若需最小宽度兜底，可改用minmax(min-content, max-content) - 命名线冲突时以父层为准：父子都定义了
[label]，子层的声明会被忽略，实际对齐位置由顶层决定
subgrid 的核心约束很硬：它不“继承”样式或尺寸，只“委托”轨道控制权。一旦父轨道未显式声明、子元素未正确定位、或中间层引入隐式结构，映射就断了——这种断裂往往无声无息，直到某天新加一行数据，列突然错位。
