CSS Subgrid嵌套网格布局与组件对齐实战

Subgrid解决的问题与浏览器支持

CSS Grid布局中，嵌套网格（nested grid）的子网格无法继承父网格的轨道定义，导致行列对齐必须手动维护。Subgrid允许子网格直接采用父网格的轨道定义，实现跨层级的精确对齐。这是CSS布局领域近年最重要的特性之一。

截至2026年，Subgrid已在Chrome 117+、Firefox 71+、Safari 16+全面支持，覆盖主流浏览器的最新两个大版本。生产环境可以安全使用，建议配合@supports做渐进增强。

/* 渐进增强：支持Subgrid时使用，不支持时回退到普通Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: grid;
  gap: 12px;
}

@supports (grid-template-rows: subgrid) {
  .card {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

Subgrid基础语法与行对齐

Subgrid的核心属性值是grid-template-rows: subgrid和grid-template-columns: subgrid，分别表示子网格在行方向和列方向继承父网格的轨道。最常见的需求是让卡片列表的标题、摘要、按钮区域跨卡片水平对齐。

典型的卡片对齐场景：每个卡片高度不一致（摘要文字长短不同），但需要标题行对齐、按钮行对齐。传统做法需要给摘要区域设min-height或用flexbox的margin-top: auto hack，维护成本高且不够精确。

.card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-template-rows: auto auto 1fr auto; /* 标题/摘要/内容/按钮 */
  gap: 16px 24px;
}

.card {
  display: grid;
  grid-row: span 4;          /* 占4行 */
  grid-template-rows: subgrid; /* 继承父网格的4行轨道 */
  gap: inherit;               /* 继承父网格gap */
}

.card-title { grid-row: 1; }
.card-desc  { grid-row: 2; }
.card-body  { grid-row: 3; }
.card-action{ grid-row: 4; }

上述代码中，所有卡片的card-action行会自动对齐到父网格的第4行轨道，无论card-body内容多高，按钮始终位于卡片底部对齐。

列方向Subgrid与表单布局

行方向Subgrid用得最多，列方向Subgrid同样实用。表单布局中，label和input需要跨行对齐：

.form-grid {
  display: grid;
  grid-template-columns: 120px 1fr 120px 1fr;
  grid-template-rows: repeat(auto-fill, auto);
  gap: 8px 16px;
}

.form-row {
  display: grid;
  grid-column: 1 / -1;     /* 占满整行 */
  grid-template-columns: subgrid; /* 继承父网格的4列 */
  gap: inherit;
  align-items: center;
}

.form-label {
  grid-column: 1;
  text-align: right;
  font-weight: 500;
}

.form-input {
  grid-column: 2;
}

/* 第二组label-input */
.form-label-2 { grid-column: 3; }
.form-input-2 { grid-column: 4; }

当表单行数和列数变化时，Subgrid自动适配父网格的列定义，无需为每个form-row重复声明grid-template-columns。

Subgrid与命名轨道的配合

父网格定义的命名轨道（named grid lines）会被Subgrid子网格继承，可以用grid-area做语义化布局：

.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  grid-template-rows: 60px 1fr 48px;
  grid-template-areas:
    "header header  header"
    "nav    content aside"
    "footer footer  footer";
  gap: 0;
  min-height: 100vh;
}

.page-header {
  grid-area: header;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: "logo nav actions";
  align-items: center;
  padding: 0 24px;
}

.header-logo   { grid-area: logo; }
.header-nav    { grid-area: nav; }
.header-actions{ grid-area: actions; }

Subgrid继承父网格的命名轨道后，子网格内的元素可以用grid-area引用父级定义的区域名，实现跨层级的一致性对齐。

Subgrid实战：响应式Dashboard布局

Dashboard场景中，统计卡片和图表区域需要在不同屏幕尺寸下保持对齐。Subgrid让布局逻辑集中在顶层容器，子组件无需关心外部网格定义：

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 16px;
}

/* 统计卡片区域：4列对齐 */
.stats-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}

.stat-card {
  padding: 20px;
  border-radius: 8px;
  background: var(--surface);
}

/* 图表区域：2列跨行对齐 */
.chart-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}

.chart-main {
  grid-column: 1 / 3; /* 占前两列 */
}

.chart-side {
  grid-column: 3 / 5; /* 占后两列 */
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
  }
  .chart-main, .chart-side {
    grid-column: 1 / -1;
  }
}

当父级dashboard的列定义变化时（从4列变为2列），所有使用subgrid的子网格自动适配新的轨道定义，无需逐个修改子组件的布局代码。

Subgrid的局限性也需注意：子网格的gap必须与父网格一致，无法独立设置更大的间距；Subgrid只能继承直接父级的轨道，无法跨多层继承；当父网格使用auto-fill/auto-fit时，子网格无法用subgrid继承隐式轨道数量。