目前在 CSS Grid Level 2 中，真正已经落地并且可以直接用于生产环境的功能，其实只有 subgrid。它的核心价值非常明确：让子网格直接复用父网格的列轨道或行轨道，专门解决嵌套 Grid 布局中常见的对齐偏移、网格线不一致等问题。不过也需要注意，subgrid 目前只支持单一方向继承，也就是 columns 或 rows 只能二选一；在实际开发中，还必须结合 grid-column/grid-row 显式声明跨越范围。至于浏览器兼容性，现阶段依旧不算理想：Firefox 71+ 已经提供原生支持，而 Chrome 和 Safari 仍需开启实验性标志，短期内也没有明确的正式推进计划。
从当前的 CSS Grid Level 2 实际支持情况来看，真正能够稳定落地、直接应用到生产环境的功能只有 subgrid。至于其他提案功能，例如 masonry 布局，仍然处在实验阶段或仅有部分支持，暂时不能作为稳定特性在正式项目中依赖。
subgrid 是什么，为什么值得使用
当你在一个 display: grid 容器内部继续嵌套另一个 Grid 容器时，子容器默认会生成自己独立的轨道系统（列与行），与父级网格没有直接关联。这样一来，子元素就无法精准对齐父网格线，往往会出现响应式布局错位、间距不统一、后期维护复杂度上升等问题。
subgrid 的作用，就是让子网格“放弃自定义轨道”，直接继承并复用父网格的列线或行线。这里继承的不是普通样式，而是网格轨道定义本身，这也是它在复杂布局中非常实用的原因。
- 只支持
grid-template-columns: subgrid或grid-template-rows: subgrid，两者不能同时声明 - 必须配合
display: grid使用，inline-grid目前不支持 - 父容器必须显式定义
grid-template-columns或grid-template-rows，隐式轨道（例如通过grid-auto-columns生成的轨道）无法被子网格继承
subgrid 的实际写法与常见错误
在实际开发中，最常见的错误通常有两类：一种是试图让子网格“同时继承列和行”，另一种是遗漏了 grid-column/grid-row 的跨越范围设置，导致布局结果不符合预期。
- ❌ 错误写法：
grid-template-columns: subgrid; grid-template-rows: subgrid;（当前所有主流浏览器都不支持双subgrid同时生效） - ❌ 错误写法：
.child { display: grid; grid-template-columns: subgrid; }但没有设置grid-column: span N，这样子网格默认只占一列，无法横跨父网格中的多列区域 - ✅ 正确写法：父容器先定义三列 → 子容器通过
grid-column: span 3+grid-template-columns: subgrid继承列轨道，再单独定义自己的grid-template-rows
示例片段：
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-column: span 3; /* 必须明确跨越 */
grid-template-columns: subgrid; /* 复用父列轨道 */
grid-template-rows: auto 100px;
}浏览器支持现状与兼容性处理
subgrid 在 Firefox 71+ 中已经可以原生使用；但截至 2026 年 8 月，Chrome 和 Safari 仍然需要手动开启实验性标志（chrome://flags/#enable-experimental-web-platform-features）后才能启用，而且官方暂时也没有公布明确的正式上线时间表。换句话说，这意味着：
- 不能单纯依赖
@supports (grid-template-columns: subgrid)做渐进增强 —— 在很多情况下检测结果会失败，即使浏览器开启 flag 后实际上已经可用 - 真实项目中，更建议通过 Ja vaScript 检测
CSS.supports('grid-template-columns', 'subgrid')，再动态添加类名进行兼容处理，比如降级为display: flex，或者手动重复声明列宽 - 不要过早期待移动端 Safari 提供稳定支持 —— 即使是 iOS 17+，目前也依然没有正式加入该特性
对于那些真正需要 subgrid 的使用场景，例如仪表盘中的可折叠嵌套卡片组、多层级精准对齐的表单布局，现阶段通常仍然只能通过手动同步轨道宽度，或者借助 JavaScript 计算来模拟实现。它的实用价值毋庸置疑，但从浏览器落地节奏来看，整体推进速度仍比很多开发者预期更慢。
