因为html表格元素默认不是网格容器，subgrid仅对显式设为display: grid的容器生效；中写subgrid会被静默忽略，必须用替代并由父容器显式定义带命名的grid-template-columns轨道，子元素才可启用subgrid并锚定命名线。
为什么表格里写 grid-template-columns: subgrid 没反应
因为 HTML 表格元素（<table>、<code><tr>、<code><td>）默认不是网格容器，<code>subgrid 只对显式设为 display: grid 的容器生效。直接在 <td> 里写 <code>grid-template-columns: subgrid，浏览器会静默忽略——computed 样式里显示为 none，不是语法错，是根本没进入校验流程。
- 必须先把父级容器（比如某个
<td> 或包装 <code><div>）设为 <code>display: grid - 该父容器还得显式定义
grid-template-columns，例如grid-template-columns: 120px 1fr 80px，不能只靠table-layout: fixed或width属性“暗示”列宽 <td> 本身若被设为 <code>display: contents，它就不再是真实网格项，其子元素无法继承 subgridsubgrid在表格嵌套中实际生效的最小结构要让深层嵌套内容（如某单元格内的多行表单）列对齐顶层表格列线，必须满足三层直系关系：
- 顶层容器：一个
<div class="table-grid">（替代原 <code><table>），设 <code>display: grid+grid-template-columns: [col1] 120px [col2] 1fr [col3] 80px - 中间行项：
<div class="row"> 是它的直接子元素，设 <code>display: grid+grid-template-columns: subgrid+grid-column: 1 / -1 - 深层单元格：
<div class="cell"> 是 <code>.row的直接子元素，也设display: grid+grid-template-columns: subgrid；它内部的输入框、按钮等子元素才能用grid-column: col1等命名线定位任何一层用了
display: table-cell或包裹了display: contents的中间层，都会切断 subgrid 链路。命名轨道线才是跨层级对齐的关键
只写
grid-template-columns: subgrid不够——它只是继承列数和尺寸，但没提供语义锚点。真正让深层组件“知道该对哪一列”的，是父容器定义的命名线（如[label]、[input]）。- 父容器必须写带命名的轨道：
grid-template-columns: [label] 120px [input] 1fr [action] 80px - 子网格启用
grid-template-columns: subgrid后，其子元素才能写grid-column: label或grid-column: input / action - 如果父容器只写
grid-template-columns: 120px 1fr 80px（无命名），子元素只能用数字线（如grid-column: 1），一旦某层插入新列，所有数字索引全乱
响应式下 subgrid 列对齐容易崩的真实原因
很多人以为只要父容器用
repeat(auto-fit, minmax(200px, 1fr)))就能响应式继承，结果 subgrid 在小屏下失效。问题不在媒体查询，而在轨道定义本身：-
repeat(auto-fit, ...)生成的是隐式轨道，subgrid不认——它只继承显式写出的轨道模板 - 正确做法：用
grid-template-columns: [start] minmax(200px, 1fr) [main] minmax(200px, 1fr) [end]这类带命名+弹性值的组合，既保持语义稳定，又允许浏览器按需压缩 - 子网格仍写
grid-template-columns: subgrid，命名线自动映射，无需在断点里重写 subgrid 声明
subgrid 的脆弱性不在语法，而在轨道链路的完整性：少一个显式声明、多一层非 grid 容器、漏一组命名线，整条对齐就断在那一环。
- 父容器必须写带命名的轨道：
- 顶层容器：一个
