CSS Subgrid：子网格布局与组件化实践

---

title: CSS Subgrid：子网格布局与组件化实践

keywords:

• subgrid
• grid-template-rows
• grid-template-columns
• 组件布局
• 对齐

description: 使用 CSS Subgrid 让子项继承父网格轨道，实现组件级对齐与一致的栅格排版，并提供兼容与降级建议。

categories:

• 文章资讯
• 编程技术

---

概述

Subgrid 允许子网格继承父网格的轨道定义，从而在嵌套布局中保持行列对齐。适用于复杂组件在页面整体栅格中的一致排版。

用法/示例

.page {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
}

.card-list {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

工程建议

• 仅在需要与父网格对齐的嵌套场景使用 subgrid，避免过度依赖导致结构复杂化。
• 对不支持的浏览器提供降级（如将子网格改为独立网格并手动对齐）。
• 明确整体栅格语义与间距，减少组件内临时对齐规则。

参考与验证

• MDN：Subgrid — https://developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout/Subgrid
• web.dev：Subgrid — https://web.dev/articles/css-subgrid