深入解析CSS Grid布局：从入门到精通

一、概述：Grid布局的革命性意义

1.1 布局技术的演进历程

Web布局技术经历了漫长的发展历程。从最初的表格布局（<table>），到浮动布局（float），再到定位布局（position），每一种技术都有其局限性。Flexbox的出现解决了一维布局的诸多问题，但对于复杂的二维布局仍显不足。CSS Grid布局的诞生，标志着Web布局进入了一个全新的时代 [1]。

Grid布局是第一个专门为二维布局设计的CSS模块，它能够同时处理行和列，为开发者提供了前所未有的布局控制能力。与传统布局方法相比，Grid布局具有以下显著优势：

二维控制：可以同时精确控制元素在水平和垂直方向上的位置
语义化布局：通过命名区域，使布局代码更具可读性
响应式友好：内置的弹性单位和函数，天然支持响应式设计
重叠支持：元素可以轻松重叠，无需复杂的定位技巧
源码顺序无关：CSS可以完全控制元素的视觉顺序，不受HTML结构限制

1.2 Grid vs Flexbox：选择合适的工具

Grid和Flexbox并非竞争关系，而是互补的布局工具。理解它们的适用场景是掌握现代CSS布局的关键：

特性	Grid	Flexbox
维度	二维（行+列）	一维（行或列）
适用场景	页面级布局、复杂区域划分	组件内部布局、元素对齐
控制方式	容器定义结构，项目定位到具体位置	容器定义方向，项目沿轴线分布
响应式	通过区域重新定义实现	通过换行和伸缩实现
浏览器支持	现代浏览器（IE11部分支持）	广泛支持

最佳实践：使用Grid进行页面的宏观布局，使用Flexbox处理组件内部的微观布局。两者结合使用，能够构建出既强大又灵活的布局系统。

二、核心概念：理解Grid的构成要素

在深入学习Grid属性之前，必须彻底理解其基本概念。这些术语构成了Grid布局的理论基础。

图1：CSS Grid基本概念示意图

2.1 基本术语表

中文术语	英文术语	详细解释
网格容器	Grid Container	应用了 `display: grid` 或 `display: inline-grid` 的元素。它是所有网格项的直接父元素，定义了网格的整体结构。
网格项	Grid Item	网格容器的直接子元素。注意：只有直接子元素才是网格项，孙子元素不受Grid布局影响。
网格线	Grid Line	构成网格结构的分割线。包括水平网格线（划分行）和垂直网格线（划分列）。网格线可以有数字编号，也可以有自定义名称。
网格轨道	Grid Track	两条相邻网格线之间的空间。可以是行轨道（两条水平网格线之间）或列轨道（两条垂直网格线之间）。
网格单元	Grid Cell	四条网格线围成的最小矩形空间，类似于表格中的单元格。
网格区域	Grid Area	由四条网格线围成的矩形区域，可以包含一个或多个网格单元。可以通过坐标或名称来引用。
网格间距	Grid Gap	网格轨道之间的间隔空间，不包含内容，纯粹用于视觉分隔。

2.2 网格线编号系统

网格线的编号遵循特定规则，理解这个系统对于精确定位网格项至关重要：

正向编号：从1开始，从左到右、从上到下递增
反向编号：从-1开始，从右到左、从下到上递减
命名线：可以为网格线指定自定义名称，提高代码可读性

css 复制代码

.container {
  display: grid;
  /* 3列网格将产生4条垂直网格线：1, 2, 3, 4（正向）或 -4, -3, -2, -1（反向） */
  grid-template-columns: 100px 200px 100px;
}

2.3 显式网格 vs 隐式网格

这是Grid布局中的一个重要概念，直接影响布局的行为和性能：

图2：显式网格与隐式网格的区别

**显式网格（Explicit Grid）**是通过 grid-template-columns、grid-template-rows 或 grid-template-areas 明确定义的网格结构。这部分网格的尺寸和行为完全由开发者控制。

**隐式网格（Implicit Grid）**是当网格项被放置在显式网格范围之外时，浏览器自动创建的额外网格轨道。隐式网格的行为由 grid-auto-columns、grid-auto-rows 和 grid-auto-flow 属性控制。

css 复制代码

.container {
  display: grid;
  /* 显式定义2x2网格 */
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
  
  /* 控制隐式网格的行为 */
  grid-auto-columns: 150px;
  grid-auto-rows: 80px;
  grid-auto-flow: row;
}

.item-5 {
  /* 这个项目会被放置在隐式网格中 */
  grid-column: 3;
  grid-row: 1;
}

三、网格容器属性详解

容器属性定义在网格容器上，控制整个网格的结构、行为和外观。

3.1 `display` - 声明网格容器

这是启用Grid布局的基础属性：

css 复制代码

.container {
  display: grid;        /* 块级网格容器 */
  /* 或 */
  display: inline-grid; /* 行内级网格容器 */
}

重要副作用：一旦元素成为网格容器，其子元素的以下属性将失效：

float
display: inline-block
display: table-cell
vertical-align
column-*（多列布局相关属性）

3.2 `grid-template-columns` 和 `grid-template-rows` - 定义网格结构

这是Grid布局最核心的属性，用于定义网格的列宽和行高。

3.2.1 基本语法

css 复制代码

.container {
  display: grid;
  /* 定义三列：固定宽度、百分比、自动宽度 */
  grid-template-columns: 200px 50% auto;
  /* 定义两行：固定高度 */
  grid-template-rows: 100px 200px;
}

3.2.2 `fr` 单位 - 弹性分数单位

fr（fraction）是Grid布局引入的革命性单位，代表网格容器中可用空间的一份：

图3：fr单位和repeat()函数的使用

css 复制代码

.container {
  display: grid;
  /* 三列：第一列占1份，第二列占2份，第三列占1份 */
  grid-template-columns: 1fr 2fr 1fr;
  
  /* 混合使用：固定宽度 + 弹性宽度 */
  grid-template-columns: 200px 1fr 100px;
}

计算原理 ：fr 单位的计算发生在所有非弹性轨道（如 px、%、auto）确定尺寸之后。剩余空间按 fr 的比例分配。

3.2.3 `repeat()` 函数 - 简化重复定义

css 复制代码

.container {
  /* 基本用法：重复相同的值 */
  grid-template-columns: repeat(4, 1fr);
  /* 等同于：1fr 1fr 1fr 1fr */
  
  /* 重复模式 */
  grid-template-columns: repeat(3, 100px 200px);
  /* 等同于：100px 200px 100px 200px 100px 200px */
  
  /* 混合使用 */
  grid-template-columns: 50px repeat(3, 1fr) 50px;
  /* 等同于：50px 1fr 1fr 1fr 50px */
}

3.2.4 `auto-fill` vs `auto-fit` - 响应式网格的关键

这两个关键字用于创建响应式网格，但行为略有不同：

图4：auto-fill与auto-fit的区别

css 复制代码

.container-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 创建尽可能多的列，空列保持存在 */
}

.container-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 创建尽可能多的列，空列会被折叠 */
}

关键区别：

auto-fill：保留空的轨道，维持网格结构的完整性
auto-fit：折叠空的轨道，让现有内容填满整个容器

3.2.5 `minmax()` 函数 - 设置尺寸范围

css 复制代码

.container {
  display: grid;
  /* 列宽最小100px，最大不超过1fr */
  grid-template-columns: minmax(100px, 1fr) 200px minmax(50px, 300px);
  
  /* 常用于响应式设计 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

3.2.6 命名网格线

为网格线命名可以大大提高代码的可读性和维护性：

css 复制代码

.container {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end main-start] 1fr 
    [main-end];
  grid-template-rows: 
    [header-start] 80px 
    [header-end content-start] 1fr 
    [content-end footer-start] 60px 
    [footer-end];
}

.header {
  grid-column: sidebar-start / main-end;
  grid-row: header-start / header-end;
}

自动命名规则 ：当使用 grid-template-areas 定义区域时，每个区域会自动生成对应的网格线名称：

区域 header 会自动创建 header-start 和 header-end 网格线

3.3 `grid-template-areas` - 可视化布局定义

这是Grid布局最直观的特性之一，允许通过ASCII艺术的方式定义布局：

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header  header  header"
    "sidebar content ads"
    "footer  footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.ads     { grid-area: ads; }
.footer  { grid-area: footer; }

语法规则：

每个字符串代表一行
相同的名称表示同一个区域
.（点号）表示空单元格
区域必须形成矩形（不能是L形或其他不规则形状）

3.4 间距控制属性

3.4.1 `gap`、`row-gap`、`column-gap`

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* 新语法（推荐） */
  gap: 20px 10px;        /* 行间距20px，列间距10px */
  gap: 15px;             /* 行列间距都是15px */
  
  /* 分别设置 */
  row-gap: 20px;
  column-gap: 10px;
  
  /* 旧语法（仍然支持） */
  grid-gap: 20px 10px;
  grid-row-gap: 20px;
  grid-column-gap: 10px;
}

注意：gap 属性现在是通用属性，也可以用于Flexbox布局。

3.5 对齐属性详解

Grid布局提供了强大的对齐控制，分为两个层面：

3.5.1 网格项在单元格内的对齐

css 复制代码

.container {
  display: grid;
  
  /* 控制所有网格项在其单元格内的对齐 */
  justify-items: start | end | center | stretch;  /* 水平对齐 */
  align-items: start | end | center | stretch;    /* 垂直对齐 */
  
  /* 简写形式 */
  place-items: <align-items> <justify-items>;
  place-items: center;  /* 水平垂直都居中 */
}

3.5.2 整个网格在容器内的对齐

css 复制代码

.container {
  display: grid;
  width: 800px;
  height: 600px;
  
  /* 当网格总尺寸小于容器时，控制网格的位置 */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  
  /* 简写形式 */
  place-content: <align-content> <justify-content>;
}

对齐属性	作用对象	方向	说明
`justify-items`	网格项	水平（行内轴）	控制项在单元格内的水平位置
`align-items`	网格项	垂直（块轴）	控制项在单元格内的垂直位置
`justify-content`	整个网格	水平（行内轴）	控制网格在容器内的水平分布
`align-content`	整个网格	垂直（块轴）	控制网格在容器内的垂直分布

3.6 自动网格属性

3.6.1 `grid-auto-flow` - 控制自动放置

css 复制代码

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* 控制网格项的自动放置方向 */
  grid-auto-flow: row;        /* 默认：按行填充 */
  grid-auto-flow: column;     /* 按列填充 */
  grid-auto-flow: row dense;  /* 按行填充，尽量填补空隙 */
  grid-auto-flow: column dense; /* 按列填充，尽量填补空隙 */
}

dense 关键字：启用"密集"打包算法，会尝试填补前面留下的空隙，但可能改变项目的视觉顺序。

3.6.2 `grid-auto-columns` 和 `grid-auto-rows`

css 复制代码

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  
  /* 定义隐式创建的轨道尺寸 */
  grid-auto-columns: 100px;
  grid-auto-rows: 80px;
  
  /* 也可以使用复杂值 */
  grid-auto-columns: minmax(100px, 1fr);
  grid-auto-rows: minmax(50px, auto);
}

3.7 简写属性

3.7.1 `grid-template`

css 复制代码

.container {
  /* 完整语法 */
  grid-template:
    "header header" 80px
    "sidebar content" 1fr
    "footer footer" 60px
    / 200px 1fr;
  
  /* 等同于 */
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-rows: 80px 1fr 60px;
  grid-template-columns: 200px 1fr;
}

3.7.2 `grid`

这是最完整的简写属性，但由于语法复杂，实际使用中较少：

css 复制代码

.container {
  /* 设置显式网格 */
  grid: 200px 100px / 1fr 2fr;
  /* 等同于 */
  grid-template-rows: 200px 100px;
  grid-template-columns: 1fr 2fr;
}

四、网格项属性详解

网格项属性定义在网格项上，用于控制单个项目在网格中的位置、大小和对齐方式。

4.1 基于网格线的定位

4.1.1 基本定位属性

css 复制代码

.item {
  /* 指定起始和结束网格线 */
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  
  /* 使用命名网格线 */
  grid-column-start: sidebar-start;
  grid-column-end: content-end;
  
  /* 使用负数（从末尾计算） */
  grid-column-start: -3;
  grid-column-end: -1;
}

4.1.2 `span` 关键字

css 复制代码

.item {
  /* 跨越指定数量的轨道 */
  grid-column-start: 2;
  grid-column-end: span 3;  /* 从第2条线开始，跨越3个轨道 */
  
  /* 也可以用在start属性上 */
  grid-column-start: span 2;
  grid-column-end: 5;       /* 到第5条线结束，向前跨越2个轨道 */
}

4.1.3 简写属性

css 复制代码

.item {
  /* grid-column: start / end */
  grid-column: 1 / 3;
  grid-column: 1 / span 2;
  grid-column: span 2 / 4;
  
  /* grid-row: start / end */
  grid-row: 2 / 4;
  grid-row: 2 / span 2;
  
  /* grid-area: row-start / column-start / row-end / column-end */
  grid-area: 1 / 1 / 3 / 3;
  grid-area: 1 / 1 / span 2 / span 2;
}

4.2 基于区域的定位

css 复制代码

.item {
  /* 使用在grid-template-areas中定义的区域名 */
  grid-area: header;
  grid-area: sidebar;
  grid-area: content;
}

4.3 单个项目的对齐控制

css 复制代码

.item {
  /* 覆盖容器的justify-items设置 */
  justify-self: start | end | center | stretch;
  
  /* 覆盖容器的align-items设置 */
  align-self: start | end | center | stretch;
  
  /* 简写形式 */
  place-self: <align-self> <justify-self>;
  place-self: center;  /* 在单元格内居中 */
}

4.4 层叠控制

Grid布局天然支持元素重叠，可以通过 z-index 控制层叠顺序：

css 复制代码

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
  z-index: 1;
}

.item-2 {
  grid-area: 2 / 2 / 4 / 4;
  z-index: 2;  /* 显示在item-1上方 */
}

五、高级特性与技巧

5.1 Subgrid - 嵌套网格的对齐

Subgrid是CSS Grid Level 2规范中的重要特性，允许嵌套网格继承父网格的轨道定义：

css 复制代码

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

.nested-grid {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  
  /* 声明为子网格 */
  display: grid;
  grid-template-columns: subgrid;  /* 继承父网格的列定义 */
  grid-template-rows: subgrid;     /* 继承父网格的行定义 */
}

浏览器支持：目前主要由Firefox支持，Chrome和Safari正在开发中。

5.2 响应式网格模式

5.2.1 自适应列数

css 复制代码

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

5.2.2 媒体查询配合区域重定义

css 复制代码

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar content"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 200px 1fr 200px;
    grid-template-areas:
      "header header header"
      "sidebar content ads"
      "footer footer footer";
  }
}

5.3 网格项的自动定位算法

Grid布局有一套复杂的自动定位算法，理解这个算法有助于预测布局行为：

明确定位的项目：首先放置所有明确指定位置的项目
部分定位的项目：处理只指定了行或列的项目
自动定位的项目 ：按照 grid-auto-flow 的设置放置剩余项目

5.4 网格线的隐式命名

当使用 grid-template-areas 时，会自动创建对应的网格线名称：

css 复制代码

.container {
  grid-template-areas:
    "header header"
    "sidebar content";
}

.item {
  /* 可以使用自动生成的网格线名称 */
  grid-column: header-start / header-end;
  grid-row: sidebar-start / content-end;
}

六、实际应用案例

6.1 经典网站布局

css 复制代码

.website-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { 
  grid-area: header; 
  background: #333;
  color: white;
  padding: 1rem;
}

.sidebar { 
  grid-area: sidebar; 
  background: #f5f5f5;
  padding: 1rem;
}

.main { 
  grid-area: main; 
  padding: 1rem;
}

.footer { 
  grid-area: footer; 
  background: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

6.2 卡片网格布局

css 复制代码

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

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* 特色卡片占据更多空间 */
.card.featured {
  grid-column: span 2;
  grid-row: span 2;
}

6.3 复杂的杂志式布局

css 复制代码

.magazine-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 200px);
  gap: 10px;
}

.article-main {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.article-secondary {
  grid-column: 4 / 7;
  grid-row: 1 / 2;
}

.sidebar {
  grid-column: 4 / 7;
  grid-row: 2 / 4;
}

.article-small-1 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

.article-small-2 {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

七、浏览器支持与兼容性

7.1 现代浏览器支持

浏览器	版本	支持程度
Chrome	57+	完全支持
Firefox	52+	完全支持
Safari	10.1+	完全支持
Edge	16+	完全支持
IE	11	部分支持（旧语法）

7.2 IE11兼容性处理

IE11支持Grid布局的早期版本，语法有所不同：

css 复制代码

/* 现代语法 */
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

/* IE11语法 */
.container {
  display: -ms-grid;
  -ms-grid-columns: 1fr 2fr 1fr;
  -ms-grid-rows: auto 1fr auto;
}

.item {
  /* IE11需要明确指定位置 */
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

7.3 渐进增强策略

css 复制代码

.container {
  /* 回退方案：Flexbox */
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
}

/* 支持Grid的浏览器 */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
  
  .item {
    flex: none;
  }
}

八、最佳实践与性能考虑

8.1 语义化命名

css 复制代码

/* 推荐：使用语义化的区域名称 */
.layout {
  grid-template-areas:
    "header header header"
    "navigation content sidebar"
    "footer footer footer";
}

/* 避免：使用无意义的名称 */
.layout {
  grid-template-areas:
    "a a a"
    "b c d"
    "e e e";
}

8.2 合理使用隐式网格

css 复制代码

/* 推荐：为隐式网格设置合理的默认值 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: row dense;
}

8.3 性能优化建议

避免过度嵌套：虽然Grid支持嵌套，但过深的嵌套会影响性能
合理使用 dense ：grid-auto-flow: dense 会增加布局计算复杂度
优先使用 fr 单位 ：相比百分比，fr 单位的计算更高效
避免频繁改变网格结构 ：动态修改 grid-template-* 属性会触发重新布局

8.4 可访问性考虑

css 复制代码

/* 确保视觉顺序与DOM顺序一致，或提供适当的导航 */
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav content"
    "footer footer";
}

/* 在小屏幕上保持逻辑顺序 */
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "footer";
  }
}

九、总结

CSS Grid布局代表了Web布局技术的重大飞跃。它不仅解决了传统布局方法的诸多限制，更为现代Web设计提供了前所未有的创作自由。通过掌握Grid的核心概念、属性和最佳实践，开发者能够构建出既美观又高效的复杂布局。

Grid布局的学习曲线虽然相对陡峭，但一旦掌握，其带来的开发效率提升和设计可能性的扩展是巨大的。结合Flexbox等其他布局技术，Grid为现代Web开发提供了完整而强大的布局解决方案。

随着浏览器支持的不断完善和新特性（如Subgrid）的逐步普及，Grid布局必将在未来的Web开发中发挥更加重要的作用。投资时间学习和掌握Grid布局，是每个前端开发者的明智选择。

深入解析CSS Grid布局：从入门到精通

目录

一、概述：Grid布局的革命性意义

1.1 布局技术的演进历程

1.2 Grid vs Flexbox：选择合适的工具

二、核心概念：理解Grid的构成要素

2.1 基本术语表

2.2 网格线编号系统

2.3 显式网格 vs 隐式网格

三、网格容器属性详解

3.1 display - 声明网格容器

3.2 grid-template-columns 和 grid-template-rows - 定义网格结构

3.2.1 基本语法

3.2.2 fr 单位 - 弹性分数单位

3.2.3 repeat() 函数 - 简化重复定义

3.2.4 auto-fill vs auto-fit - 响应式网格的关键

3.2.5 minmax() 函数 - 设置尺寸范围

3.2.6 命名网格线

3.3 grid-template-areas - 可视化布局定义

3.4 间距控制属性

3.4.1 gap、row-gap、column-gap

3.5 对齐属性详解

3.5.1 网格项在单元格内的对齐

3.5.2 整个网格在容器内的对齐

3.6 自动网格属性

3.6.1 grid-auto-flow - 控制自动放置

3.6.2 grid-auto-columns 和 grid-auto-rows

3.7 简写属性

3.7.1 grid-template

3.7.2 grid

四、网格项属性详解

4.1 基于网格线的定位

4.1.1 基本定位属性

4.1.2 span 关键字

4.1.3 简写属性

4.2 基于区域的定位

4.3 单个项目的对齐控制

4.4 层叠控制

五、高级特性与技巧

5.1 Subgrid - 嵌套网格的对齐

5.2 响应式网格模式

5.2.1 自适应列数

5.2.2 媒体查询配合区域重定义

5.3 网格项的自动定位算法

5.4 网格线的隐式命名

六、实际应用案例

6.1 经典网站布局

6.2 卡片网格布局

6.3 复杂的杂志式布局

七、浏览器支持与兼容性

7.1 现代浏览器支持

7.2 IE11兼容性处理

7.3 渐进增强策略

八、最佳实践与性能考虑

8.1 语义化命名

8.2 合理使用隐式网格

8.3 性能优化建议

8.4 可访问性考虑

九、总结

3.1 `display` - 声明网格容器

3.2 `grid-template-columns` 和 `grid-template-rows` - 定义网格结构

3.2.2 `fr` 单位 - 弹性分数单位

3.2.3 `repeat()` 函数 - 简化重复定义

3.2.4 `auto-fill` vs `auto-fit` - 响应式网格的关键

3.2.5 `minmax()` 函数 - 设置尺寸范围

3.3 `grid-template-areas` - 可视化布局定义

3.4.1 `gap`、`row-gap`、`column-gap`

3.6.1 `grid-auto-flow` - 控制自动放置

3.6.2 `grid-auto-columns` 和 `grid-auto-rows`

3.7.1 `grid-template`

3.7.2 `grid`

4.1.2 `span` 关键字