CSS中的网格布局（Grid Layout）子网格（subgrid）详解

描述
子网格（subgrid）是CSS网格布局的一个高级特性，允许网格项（grid item）继承其父网格容器的轨道定义，从而创建嵌套网格与外部网格的对齐关系。这个功能解决了多层嵌套网格布局中的对齐难题，让复杂的网格布局变得更加一致和可控。

解题过程

1. 子网格要解决什么问题
在没有子网格之前，当我们创建嵌套网格时，每个网格容器都有自己独立的轨道定义：

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

.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 独立定义，与父网格不对齐 */
}

这样会导致嵌套网格的列与父网格的列无法对齐，布局缺乏一致性。

2. 子网格的基本语法
子网格通过grid-template-rows或grid-template-columns属性的subgrid值来实现：

.grid-item {
  display: grid;
  grid-template-columns: subgrid;  /* 继承父网格的列轨道 */
  grid-template-rows: subgrid;     /* 继承父网格的行轨道 */
}

3. 子网格的实际应用示例
假设我们要创建一个三列布局，其中中间列包含一个与外部网格对齐的子网格：

HTML结构：

<div class="container">
  <div class="header">头部</div>
  <div class="sidebar">侧边栏</div>
  <div class="main">
    <div class="content">内容1</div>
    <div class="content">内容2</div>
    <div class="content">内容3</div>
  </div>
  <div class="footer">底部</div>
</div>

CSS实现：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 三列布局 */
  grid-template-rows: auto 1fr auto;       /* 三行布局 */
  gap: 20px;
  min-height: 100vh;
}

/* 让main区域跨越所有三列 */
.main {
  grid-column: 1 / -1;  /* 从第一列到最后一列 */
  display: grid;
  grid-template-columns: subgrid;  /* 关键：继承父网格的列轨道 */
  
  /* 创建自己的行轨道 */
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

/* 其他元素的网格位置 */
.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.footer { grid-column: 1 / -1; }

.content {
  background: #f0f0f0;
  padding: 10px;
}

4. 子网格的详细特性说明

轨道继承：子网格只继承显式定义的轨道，不继承隐式创建的轨道。

间隙继承：子网格默认不继承父网格的间隙，但可以通过以下方式控制：

.main {
  grid-template-columns: subgrid;
  gap: inherit;  /* 显式继承父网格的间隙 */
}

轨道覆盖：子网格可以同时使用子网格和显式轨道定义：

.main {
  grid-template-columns: subgrid [content-start] 1fr [content-end];
  /* 继承父网格轨道并添加新的网格线名称 */
}

5. 浏览器兼容性考虑
子网格是较新的特性，需要考虑兼容性：

.main {
  display: grid;
  grid-template-columns: 1fr;  /* 回退方案 */
  
  @supports (grid-template-columns: subgrid) {
    grid-template-columns: subgrid;
  }
}

6. 实际应用场景

• 表单布局：让表单标签和输入框在嵌套网格中对齐
• 卡片布局：确保卡片内部分区与外部网格列对齐
• 杂志式布局：复杂的多列文本和图片对齐

子网格通过建立嵌套网格与父网格的轨道关联，大大简化了复杂布局的实现，是创建一致、可维护网格系统的强大工具。