grid-column 和 grid-row 仅对网格容器的直接子元素生效；subgrid 需同时满足父定义轨道、子为直接子项、子设 display: grid、子显式声明 subgrid 四条件，缺一即退化为普通网格。
grid-column 和 grid-row 只对直接子元素生效
这是 Grid 布局最基础也最容易被忽略的规则：浏览器只解析网格容器（display: grid）的**直接 DOM 子元素**上的 grid-column、grid-row、grid-area 等定位属性。一旦中间夹了一层普通容器（比如没设 display: grid 的 <div>），内层元素就彻底脱离网格作用域。<p>常见错误结构：</p>
<pre class="brush:php;toolbar:false;"><div class="grid-container">
<div class="wrapper"> <!-- 没设 display: grid -->
<div class="target" style="grid-column: 2 / 4"></div>
</div>
</div></pre>此时 <code>grid-column: 2 / 4 完全被忽略，不报错也不警告——它只是个普通块元素。
解决路径只有两个：
- 删掉中间 wrapper，让
.target成为.grid-container的直接子项 - 给
.wrapper加display: grid+grid-template-columns: subgrid（前提是满足 subgrid 所有前提）
subgrid 不是继承，而是显式轨道复用
很多人以为“写了 display: grid 就能继承父轨道”，其实不是。Subgrid 是一种**委托机制**：子元素必须同时满足四个硬性条件，浏览器才把它当作父网格轨道的“延伸面”：
- 父容器明确定义了
grid-template-columns或grid-template-rows（不能只靠grid-auto-columns或repeat(auto-fit, ...)） - 子元素是父容器的**直接 DOM 子项**（
display: contents不算，flex 容器里嵌套也不算） - 子元素自身设
display: grid - 子元素显式声明
grid-template-columns: subgrid或grid-template-rows: subgrid（注意：subgrid是关键字，不能混写像素值，也不能写成display: subgrid）
漏掉任意一条，subgrid 都会退化为 none，子元素变成独立网格容器。
三层嵌套时，孙子元素对齐的是中间层，不是顶层
这是最易误判的点。假设结构是 .outer → .middle → .inner，且你想让 .inner 对齐 .outer 的列线：
-
.inner写grid-template-columns: subgrid，它对齐的是.middle的轨道，不是.outer的 - 若
.middle没设subgrid，或加了gap、grid-row: span 2，就会插入隐式轨道，导致.inner映射错位 - 想穿透对齐，必须保证
.middle同样满足 subgrid 四条件，且禁用所有干扰布局的操作（包括gap、grid-auto-rows、空标签）
命名线（如 [content]）可以跨层级传递，但前提是轨道链完整；一旦中间层用了 minmax() 或 auto-fit，命名线也会失效。
兼容性和 fallback 必须提前规划
Subgrid 目前仅在 Chrome 119+、Firefox 111+、Safari 16.4+ 支持。旧版浏览器会把 grid-template-columns: subgrid 当作无效声明，直接 fallback 到 grid-template-columns: none，子元素变成单列流式布局。
- 不要依赖开发者工具里“Computed”面板显示
subgrid就代表生效——要实际检查渲染结果是否对齐 - 响应式断点中，只在父容器改
grid-template-columns；避免在子元素媒体查询里重写轨道定义，否则继承中断 - 无法用 subgrid 时，手动同步尺寸仍是主流方案：用 CSS 自定义属性（
--col-width）或 JS 计算后注入内联样式
真正难的不是写对语法，而是在 DOM 结构、CSS 层级、响应式逻辑和浏览器支持之间维持那条脆弱的轨道映射链——稍有松动，对齐就崩了。
