在传统嵌套网格布局中，子网格轨道独立于父网格，导致对齐需手动计算魔法数字，尤其在响应式场景下易崩塌。CSS Subgrid 通过继承父网格轨道，实现跨层级精确对齐，支持动态列宽调整，无需额外 wrapper 即可构建仪表盘、数据表格等复杂 UI。
Subgrid 是 CSS Grid Layout Module Level 2 的关键字，仅用于 grid-template-columns 或 grid-template-rows 值。父网格定义轨道如 grid-template-columns: repeat(12, 1fr);，子网格容器定位如 grid-column: 2 / 7; 并设置 grid-template-columns: subgrid;，其内部项即可基于父轨道定位，如 grid-column: 2 / 4;。MDN 文档指出，这种继承确保子网格轨道尺寸与父网格同步，包括 fr 单位和 minmax 函数。
动态列宽支持是 Subgrid 核心优势。父网格使用 minmax(200px, 1fr) 或 repeat(auto-fill, minmax(250px, 1fr)) 定义响应式列，子网格自动跟随：视口缩小时列宽收缩至最小值，扩展时按 fr 比例分配。示例中，父网格 9 列 1fr，子网格跨越 2/7 列，其内部 3 列精确匹配父轨道，避免了嵌套网格的间隙错位。
响应式子网格调整参数清单：
- 父网格：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;（自适应列数，最小 240px）
- 子网格定位：grid-column: span 3; 或 3 / span 4;（跨度固定或动态）
- 子网格继承：grid-template-columns: subgrid; grid-template-rows: subgrid;（双轴继承）
- 自定义 gap：子网格 gap: 0.5rem;（覆盖父 gap，避免累加）
- 媒体查询：@media (min-width: 768px) { 子网格 grid-column: 3 / 11; }（断点调整跨度）
复杂 UI 落地参数：
- 仪表盘卡片：父 12 列，卡片 grid-row: span 4; 内部 grid-template-rows: subgrid; 确保标题/内容/页脚等高对齐。
- 数据表格：表头父网格，行项子网格 grid-template-columns: subgrid; 多级拆分列自动对齐销售额/利润。
- 嵌套列表：.item { display: grid; grid-template-rows: subgrid; grid-row: span 4; } 负责人/描述/页脚统一高度。
- 混合布局：grid-template-rows: minmax(100px, auto) subgrid;（部分独立行）
监控要点：
- 浏览器 DevTools Grid 高亮：验证父子轨道叠加对齐。
- 性能：Subgrid 渲染开销低，嵌套层级 <5 层，避免深层继承。
- 兼容回滚：@supports not (grid-template-columns: subgrid) { 使用 Flex 模拟：.item { display: flex; flex-direction: column; } blockquote { flex: 1; } }
- 阈值：列最小 200px，跨度不超过父轨道 80%，gap 统一 0.5-1rem。
风险与回滚策略：
- 兼容：Chrome <117、Safari <16 降级普通网格，手动 calc 轨道宽。
- 溢出：子项 align-self: stretch; justify-self: start; 防内容撑开轨道。
- 测试：多视口（320px-1920px）验证列宽动态，嵌套 3 层对齐无偏移。
实际项目中，Subgrid 减少 30% CSS 代码，维护成本降至零魔法数。结合 container queries 进一步增强组件复用。
资料来源：