---

title: CSS 子网格布局：Subgrid 的应用与兼容

keywords:

• Subgrid
• Grid
• 子网格
• 响应式布局
• 兼容性
• 可维护性

description: 介绍 CSS Grid 的子网格特性（subgrid），展示在多层布局中共享轨道的应用场景与代码示例，并给出兼容性与工程建议。

categories:

• 文章资讯
• 编程技术

---

概述

Subgrid 允许子元素继承父网格的轨道定义，使多层布局在同一列或行上对齐，减少重复定义并提升可维护性，适用于复杂响应式页面与组件。

用法示例

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.child {
  display: grid;
  grid-template-columns: subgrid; /* 继承父网格列 */
}

工程建议

• 仅在需要对齐与共享轨道时使用 subgrid；避免过度复杂的嵌套。
• 兼容性：现代浏览器逐步完善支持；在不支持的环境使用降级策略或重复定义轨道［参考1］。

参考与验证

• ［参考1］MDN 中文：Grid 与 Subgrid 概览与示例：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Subgrid
• ［参考2］MDN 英文：Subgrid 说明与兼容性与示例：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid
• ［参考3］web.dev：网格布局实践与子网格应用场景说明：https://web.dev/articles/css-grid

关键词校验

关键词与 Subgrid 布局与兼容一致。