CSS Subgrid：子网格布局与跨行列对齐

---

title: CSS Subgrid：子网格布局与跨行列对齐

keywords:

• Subgrid
• CSS Grid
• grid-template-rows
• grid-template-columns
• 复杂布局

description: 介绍 Subgrid 的语法与使用场景，让子元素继承父网格的轨道实现对齐，提供示例与兼容建议。

categories:

• 文章资讯
• 编程技术

---

概述

Subgrid 允许子网格继承父网格的行或列轨道，实现跨层级的精确对齐，适用于卡片列表、媒体对象等复杂布局。与脚本计算或手工对齐相比更稳定。

示例

<style>
.parent { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; gap: 8px }
.child { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid }
.title { grid-column: 1 / -1 }
</style>

<div class="parent">
  <div class="child">
    <div class="title">标题</div>
    <div>左侧</div>
    <div>右侧</div>
  </div>
</div>

工程建议

• 选择性继承：根据需要设置行为 grid-template-rows: subgrid 或列 grid-template-columns: subgrid。
• 兼容：特性检测后启用；对不支持的浏览器回退到常规 Grid 或 Flex。
• 性能：减少复杂嵌套与过多网格区域，保持渲染效率。

参考与验证

• MDN Subgrid 文档：https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid
• CSSWG 规范讨论：https://drafts.csswg.org/css-grid-2/
• web.dev Subgrid 文章：https://web.dev/articles/css-subgrid