子网格(subgrid)

子网格是CSS Grid布局中的一个强大特性，允许嵌套网格与父网格对齐，简化复杂布局的实现。它解决了传统网格嵌套时难以对齐的问题，让代码更简洁、维护性更高。

子网格的基本概念

子网格通过display: subgrid声明，使嵌套网格继承父网格的轨道定义。它只在网格容器上生效，且必须显式声明网格行或列方向为子网格。例如：

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

.child {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 必须跨越父网格的行 */
}

这个例子中，.child元素的行轨道会完全继承.parent的行定义，包括间隙（gap）和轨道尺寸。

子网格的实际应用场景

表单布局的对齐

传统表单中标签和输入框的对齐需要手动计算间距，而子网格可以自动继承父级网格：

.form {
  display: grid;
  grid-template-columns: [labels] auto [controls] 1fr;
  gap: 1em;
}

.field {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

HTML结构：

<div class="form">
  <div class="field">
    <label>用户名</label>
    <input type="text">
  </div>
</div>

卡片内容同步高度

当卡片需要内部元素等高时，子网格能完美解决：

.card-grid {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

子网格的特殊行为

隐式轨道的处理

当子网格内容超出父网格定义的轨道时：

• 如果父网格使用grid-auto-rows: auto，子网格会创建隐式轨道
• 如果父网格显式定义grid-auto-rows，子网格会继承该值

.parent {
  grid-auto-rows: minmax(100px, auto);
}
.child {
  grid-template-rows: subgrid; /* 隐式轨道高度至少100px */
}

间隙(gap)的继承规则

子网格会继承父网格的间隙值，但可以通过显式声明覆盖：

.parent { gap: 20px; }
.child { gap: 10px; } /* 覆盖父级间隙 */

浏览器兼容性解决方案

虽然子网格在现代浏览器中得到支持，但需要回退方案：

.card {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 回退方案 */
}

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

与嵌套网格的对比

传统嵌套网格需要重复定义轨道：

/* 传统方式 */
.parent { grid-template-columns: 1fr 2fr; }
.child {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 重复定义 */
}

/* 子网格方式 */
.child {
  display: grid;
  grid-template-columns: subgrid; /* 自动继承 */
}

实际开发中的限制

1. 单向子网格：可以单独声明行或列方向为子网格

   /* 仅行方向继承 */
   .child {
     grid-template-rows: subgrid;
     grid-template-columns: 1fr 1fr; /* 独立定义列 */
   }
   

2. 必须跨越完整轨道：子网格需要明确声明跨越父网格的所有轨道

   /* 错误示例 */
   .child {
     grid-template-rows: subgrid;
     grid-row: span 1; /* 不足父网格行数 */
   }
   

3. 命名网格线不会继承：父网格定义的命名线在子网格中不可用

性能考量

在超过1000个网格项的超大型布局中，子网格比完全独立的嵌套网格性能更好：

• 减少样式计算：浏览器只需计算一次轨道尺寸
• 降低重绘成本：对齐变更时只需处理单个网格

与其它布局方式的结合

子网格可以与Flexbox混合使用：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: flex;
  flex-direction: column;
}

.grid-content {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

调试技巧

Chrome DevTools中：

1. 选中网格容器时启用"显示网格"叠加层
2. 子网格会用虚线标出，与父网格实线区分
3. 轨道尺寸会显示继承关系提示

设计系统中的应用

在构建设计系统时，子网格能保持跨组件的一致性：

:root {
  --grid-columns: [start] 1fr [main] 2fr [end];
}

.component {
  grid-template-columns: subgrid;
  grid-column: start / end;
}