CSS Subgrid

深入理解 CSS Subgrid 的工作机制：父网格轨道如何被子网格继承、跨多列/行对齐、以及如何用 Subgrid 实现复杂的表格式布局。

YouTubeGoogle

CSS Subgrid

Subgrid 解决什么问题

传统的 CSS Grid 中，子元素只能在自己的网格区域内定位。但有时候，我们希望子元素能够参与到父级网格的轨道中，实现跨多列/行的对齐。

Subgrid 允许嵌套的网格容器参与到父级网格的轨道中，实现真正的跨层级对齐。

面试定位：Subgrid 是 CSS Grid Level 2 的核心特性（2019+），相对较新，不是高频面试考点，但它解决了复杂的布局对齐问题。

Subgrid 的基础语法

定义 Subgrid

.grid-parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid-child {
  /* 子元素成为网格容器 */
  display: grid;

  /* 继承父级网格的列和行轨道 */
  grid-column: span 3;
  grid-template-columns: subgrid; /* 继承父级的 3 列 */
  grid-template-rows: auto;
}

Subgrid 的实际应用

1. 卡片内部对齐

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 标题、内容、页脚 */
  grid-row: span 3;
  grid-template-rows: subgrid; /* 继承父级行轨道 */
}

/* 卡片内部标题、内容、页脚与同列其他卡片对齐 */
.card-title {
  grid-row: 1;
}

.card-content {
  grid-row: 2;
}

.card-footer {
  grid-row: 3;
}

2. 复杂表单对齐

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

.form-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid; /* 继承表单的 3 列 */
}

.form-label {
  grid-column: 1;
}

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

延展阅读