26.子网格 (Subgrid)

网格的嵌套和继承，复杂布局的简化，Grid布局的增强

📖 章节概述

CSS Subgrid是CSS Grid Layout的一个强大扩展，允许网格项目继承其父网格的轨道定义。这个特性解决了嵌套网格布局中的对齐问题，使复杂的布局设计变得更加简单和一致。

🎯 学习目标

通过本章学习，你将掌握：

• Subgrid的基本概念和语法

• 子网格与父网格的关系

• 复杂布局的简化实现

• 实际应用场景和最佳实践

• 浏览器兼容性和回退方案

🔍 核心概念

什么是Subgrid？

Subgrid允许网格项目采用其父网格的轨道定义，而不是创建独立的网格。这意味着子网格的行或列可以与父网格完美对齐。

.parent-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto auto; gap: 20px; } .child-grid { display: grid; grid-column: 1 / -1; /* 跨越所有列 */ grid-template-columns: subgrid; /* 继承父网格的列定义 */ grid-template-rows: subgrid; /* 继承父网格的行定义 */ }

Subgrid vs 嵌套Grid

🛠 基础语法

1. 基本Subgrid声明

.parent { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 100px); gap: 16px; } .subgrid-item { display: grid; grid-column: 2 / 4; /* 占据父网格的第2-3列 */ grid-row: 1 / 3; /* 占据父网格的第1-2行 */ /* 继承父网格的轨道定义 */ grid-template-columns: subgrid; grid-template-rows: subgrid; }

2. 部分继承

.mixed-subgrid { display: grid; grid-column: 1 / -1; /* 只继承列，行独立定义 */ grid-template-columns: subgrid; grid-template-rows: 50px auto 50px; }

3. 命名网格线

.parent { display: grid; grid-template-columns: [sidebar-start] 250px [content-start] 1fr [aside-start] 300px [aside-end]; grid-template-rows: [header-start] 80px [main-start] 1fr [footer-start] 60px [footer-end]; } .subgrid-content { display: grid; grid-column: content-start / aside-end; grid-row: main-start / footer-start; grid-template-columns: subgrid; grid-template-rows: subgrid; }

🎨 实际应用场景

1. 卡片网格对齐

/* 父网格 - 卡片容器 */