当前位置：首页 > news >正文

26.子网格 (Subgrid)

news 2026/3/26 21:25:04

网格的嵌套和继承，复杂布局的简化，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

特性	Subgrid	嵌套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; }