概述

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 布局与兼容一致。