Subgrid 目前不能用于解决常规嵌套容器对齐问题——它不被主流浏览器广泛支持，且仅适用于特定场景；应优先确认是否遗漏 display: grid、误用 margin: auto 或轨道无高度空间等基础问题。
Subgrid 目前不能用于解决常规嵌套容器对齐问题——它不被主流浏览器广泛支持，且仅适用于特定场景。 你遇到的“嵌套 Grid 容器对齐难”，绝大多数情况下不该指望 subgrid，而应先确认是否真的需要它。
subgrid 是什么，以及它为什么几乎用不上
subgrid 是 CSS Grid Level 2 的特性，允许子容器继承父网格的行/列轨道定义，从而让它的子项直接参与父级的轨道对齐。但它有硬性限制：
- 只在
display: grid容器上生效，且必须显式声明grid-template-rows: subgrid或grid-template-columns: subgrid - 父容器必须已定义
grid-template-rows/columns（不能是auto或fit-content()） - 截至 2026 年 4 月，Chrome / Edge 117+ 和 Safari 16.4+ 支持，Firefox 仍需手动开启实验标志，
@supports (grid-template-columns: subgrid)检测不可靠 - 它不解决“子容器自身在父网格中的位置对齐”，只解决“子容器内部元素如何对齐到父网格线”
你以为要 subgrid，其实只是漏了 display: grid
常见误判：看到某个 <div class="card"> 内部排布错乱，就以为要用 subgrid 让它“贴合外层格线”。但真实原因通常是：
-
.card没设display: grid，它只是个普通块级元素，根本没进入网格上下文 - 你给
.card写了grid-column: 2 / 4，这只是控制它在父网格里的占位，不是让它变成网格容器 - 想让
.card内部三个图标横排？得单独给它加display: grid; grid-template-columns: repeat(3, 1fr)
真正影响嵌套对齐的，是 align-self / justify-self 和容器高度
当你希望某个嵌套 Grid 容器（比如 .inner-grid）在父网格中居中，关键不在它内部怎么排，而在它自己怎么“摆”：
立即学习“前端免费学习笔记（深入）”；
- 必须在
.inner-grid元素上写align-self: center和justify-self: center，而不是只设父容器的align-items - 如果父网格的对应轨道是
grid-template-rows: auto，align-self: center可能无视觉效果——因为轨道没“高度空间”可居中 - 解决方案：要么给该轨道设固定高（如
100px），要么用align-content: center（针对多行轨道），或确保父容器有明确高度（如height: 100vh） - 切勿在同一个元素上同时写
margin: auto和justify-self: end——前者会直接忽略后者
替代 subgrid 的更稳方案：用 place-items + 显式尺寸控制
若目标是让嵌套容器“看起来对齐到外层节奏”，与其冒险用 subgrid，不如：
- 在外层 Grid 中，用
place-items: center控制嵌套容器自身的位置 - 给嵌套容器设统一尺寸（如
width: 200px; height: 120px），避免内容撑开导致错位 - 在嵌套容器内部，用
place-content: center居中其子项（注意：这是控制子项在容器内的排列，不是网格轨道） - 所有 fr 单位都基于**直接父容器**计算，嵌套越深，可用空间越小——别假设内层
1fr和外层一样宽
真正卡住你的，往往不是 subgrid 支不支持，而是某一级容器忘了 display: grid，或某处 margin: auto 默默覆盖了 justify-self。先打开开发者工具，看 computed 样式里 display 是不是 grid，再查 justify-self 是否被划掉——比查兼容性表更快定位问题。
