CSS Subgrid 子网格

CSS Subgrid（CSS Grid Level 2）：子元素对齐到父网格线、grid-template-rows/columns:subgrid、嵌套网格对齐、实际布局案例 · 难度：入门 · +10XP

CSS Subgrid —— 让嵌套网格对齐父网格

用CSS Grid布局时常常遇到一个问题：外层的卡片网格里，每个卡片内部又有网格（标题行/内容行/按钮行），但这些内部网格各管各的，标题行高度不一致。Subgrid就是来打破这个孤立的。

问题场景

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 标题/内容/按钮三行 */
  /* 问题：每张卡片的标题行高度不一致！ */
}

解决方案：Subgrid

.card {
  display: grid;
  grid-template-rows: subgrid;  /* 继承父网格的行定义！ */
  grid-row: span 3;
}

这样所有卡片的标题行、内容行、按钮行高度就完全一致了，无论每张卡片内容多长。

动手练习

1. 基础练习：做一个产品卡片网格——每张卡片有图、标题、描述、价格、按钮五行，用Subgrid让所有卡片的对应行对齐。
2. 进阶应用：做一个仪表盘面板——多个面板高度不同，但都对齐到统一的网格行上。
3. 项目实战：检查你项目中用Grid布局的卡片区域，找出有对齐问题的，用Subgrid修复。