---

CSS Grid 布局入门教程：构建强大二维布局的利器

欢迎来到 CSS Grid 布局的世界！如果你曾经为网页布局的复杂性而烦恼，比如实现复杂的网格结构、让元素在不同尺寸的屏幕上自动调整位置和大小，那么 CSS Grid 布局将是你的救星。

Grid Layout（网格布局）是 CSS 中一种强大的二维布局系统。它旨在彻底改变我们设计基于网格的用户界面的方式。与主要处理一维布局（行或列）的 Flexbox 不同，Grid 可以同时处理行和列，让你能够轻松地创建复杂的、响应式的二维布局结构。

本教程将带你从零开始，一步步深入了解 CSS Grid 布局的核心概念和常用属性，并通过代码示例来加深理解。读完本文，你将能够：

• 理解 Grid 布局的基本原理
• 掌握 Grid 容器（Grid Container）和 Grid 项目（Grid Item）的主要属性
• 学会如何定义网格结构（行和列）
• 了解如何控制网格项目的位置和尺寸
• 理解网格中的对齐方式
• 初步掌握如何利用 Grid 实现响应式布局

准备好了吗？让我们开始这段强大的布局之旅！

1. 为什么选择 CSS Grid 布局？

在 Grid 出现之前，实现复杂的网页布局通常依赖于各种技巧：

• 浮动 (Floats): 曾是创建多列布局的常见方法，但需要清除浮动，且难以处理垂直居中和响应式调整。
• 定位 (Positioning): 适用于少量元素的精确位置控制，但不适合构建整体页面框架。
• 表格 (Tables): 虽然可以实现网格，但这是语义化的滥用，不应用于非表格数据的布局。
• 内联块 (Inline-Block): 可以实现水平排列，但存在空白间隙问题，且垂直对齐不够灵活。
• Flexbox: 强大的单维布局系统，非常适合排列一组项目（如导航菜单、卡片列表），但处理复杂的二维结构（如仪表盘、杂志布局）时稍显不足。

CSS Grid 布局的出现，为 Web 布局带来了革命性的变化。它的优势在于：

• 原生支持二维布局: 同时控制行和列，无需依赖 Hack 手段。
• 结构与内容分离: HTML 结构可以保持简洁、语义化，复杂的布局逻辑完全由 CSS 控制。
• 灵活性和响应式: 轻松实现各种复杂的网格结构，并且能够方便地根据屏幕尺寸调整布局。
• 强大的对齐控制: 提供了丰富的属性来控制网格内容和项目的对齐方式。
• 代码更简洁易读: 相较于传统的布局方法，Grid 代码通常更加直观。

2. Grid 布局的基本概念

在使用 Grid 布局之前，我们需要理解几个核心概念：

• Grid Container (网格容器): 应用 display: grid; 或 display: inline-grid; 的 HTML 元素。它是所有 Grid 项目的直接父元素。
• Grid Item (网格项目): Grid 容器的直接子元素。
• Grid Line (网格线): 构成网格结构的分界线，包括行线和列线。它们是 Grid 布局的基础。你可以通过这些线来定义网格项目的尺寸和位置。网格线从 1 开始编号，例如，一个有 3 列的网格会有 4 条垂直列线（1, 2, 3, 4）。
• Grid Track (网格轨道): 位于两条相邻网格线之间的空间，可以是行轨道（Grid Row）或列轨道（Grid Column）。
• Grid Cell (网格单元): 位于行轨道和列轨道的交集处的最小单位空间，就像电子表格中的一个单元格。
• Grid Area (网格区域): 由任意数量的网格单元组成的矩形区域。一个网格项目可以占据一个或多个网格单元，从而形成一个网格区域。

(图片来源: CSS-Tricks A Complete Guide to Grid)

理解了这些概念，我们就为深入学习 Grid 属性打下了基础。

3. 开启 Grid 布局：display 属性

要使用 Grid 布局，第一步是指定一个元素作为 Grid 容器。这通过设置元素的 display 属性为 grid 或 inline-grid 来实现。

• display: grid;: 创建一个块级的 Grid 容器。
• display: inline-grid;: 创建一个内联级的 Grid 容器。

“`html

“`

“`css
.container {
display: grid; / 开启 Grid 布局 /
/ 其他 Grid 属性将在这里设置 /
}

.item {
/ 项目的样式，如背景色、边框等 /
}
“`

当你设置 display: grid; 后，它的直接子元素 (.item) 就自动成为了 Grid 项目。此时，Grid 容器还没有明确的行和列定义，默认情况下，Grid 项目会按照源代码顺序排列，每行一个（取决于 grid-auto-flow 的默认值 row）。但这只是最基础的状态，真正的力量来自于定义网格结构。

4. 定义网格结构：grid-template-rows 和 grid-template-columns

定义网格结构是 Grid 布局的核心。你可以使用 grid-template-rows 和 grid-template-columns 属性来明确指定网格的行和列。

这些属性接受一个或多个值，每个值代表一个网格轨道（行高或列宽）。值之间用空格分隔。

4.1 指定轨道尺寸的单位

Grid 提供了多种灵活的单位来指定轨道尺寸：

• 绝对单位: px, pt, cm, mm, in, pc 等。不推荐用于响应式布局。
• 相对单位: %, em, rem, vw, vh 等。
• auto: 根据内容自动调整尺寸，或者在分配剩余空间时充当最大内容尺寸。
• fr (fraction): 弹性单位。代表网格容器中可用空间的一等份（除去固定尺寸的轨道和间隙后）。这是 Grid 布局中最强大和常用的单位之一，非常适合创建流体布局。
• min-content: 轨道尺寸取其网格项目中内容所需的最小尺寸（例如，不会发生溢出的最小宽度）。
• max-content: 轨道尺寸取其网格项目中内容所需的最大尺寸（即内容不换行时的尺寸）。
• fit-content(length): 使用指定长度作为可用空间，根据可用空间和内容尺寸来决定轨道尺寸。如果可用空间大于指定长度，尺寸为指定长度；如果可用空间小于指定长度但大于 min-content，尺寸为可用空间；如果可用空间小于 min-content，尺寸为 min-content。

4.2 grid-template-columns 示例

创建一个 3 列的网格：第一列固定宽度 100px，第二列占满剩余空间的 2 份，第三列占满剩余空间的 1 份。

css
.container {
display: grid;
grid-template-columns: 100px 2fr 1fr; /* 定义三列 */
/* 假设容器宽度为 400px */
/* 第一列: 100px */
/* 剩余空间: 400px - 100px = 300px */
/* 2fr + 1fr = 3fr (总份数) */
/* 1fr = 300px / 3 = 100px */
/* 第二列: 2 * 100px = 200px */
/* 第三列: 1 * 100px = 100px */
/* 最终列宽: 100px 200px 100px */
}

4.3 grid-template-rows 示例

创建一个 2 行的网格：第一行高度自动，第二行高度 200px。

css
.container {
display: grid;
grid-template-rows: auto 200px; /* 定义两行 */
}

4.4 使用 repeat() 函数

当需要定义多个相同尺寸的行或列时，使用 repeat() 函数可以简化代码。

语法：repeat(重复次数, 轨道尺寸)

例如，创建 5 个宽度相等的列：

css
.container {
display: grid;
grid-template-columns: repeat(5, 1fr); /* 创建 5 个等宽列 */
}

创建 3 个高度为 100px 的行：

css
.container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 创建 3 个高度 100px 的行 */
}

repeat() 也可以用于重复多种尺寸模式：

css
.container {
display: grid;
grid-template-columns: repeat(2, 100px 1fr); /* 等同于 100px 1fr 100px 1fr */
}

4.5 minmax() 函数

minmax(min, max) 函数定义了一个尺寸范围。轨道尺寸必须大于或等于 min，且小于或等于 max。

例如，创建一个列，宽度至少为 100px，但不超过 300px：

css
.container {
display: grid;
grid-template-columns: minmax(100px, 300px) 1fr; /* 第一列宽度在 100px 到 300px 之间 */
}

minmax() 常用于结合 auto 和 fr，实现自适应列宽：

css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 创建尽可能多的列，每列最小宽度 200px，最大占用可用空间的 1 份 */
/* auto-fit: 尽量填满容器，即使没有足够的项目也会创建轨道 */
/* auto-fill: 尽量填满容器，但只有当有项目时才创建轨道，可能留有空白 */
}
这是一个强大的响应式技巧：当容器宽度足够时，会创建更多列；当容器变窄时，列数会减少，但每列宽度不会小于 200px，保证内容可读性。

4.6 定义网格线名称

除了使用默认的数字编号（从 1 开始），你还可以为网格线指定名称，这使得通过名称来定位项目更加直观。

css
.container {
display: grid;
grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];
grid-template-rows: [row1-start] auto [row1-end row2-start] auto [row2-end];
}
在这个例子中，我们定义了列线 col1-start, col1-end, col2-start, col2-end 和行线 row1-start, row1-end, row2-start, row2-end。注意，一条线可以有多个名称。

4.7 grid-template-areas 属性：区域布局法

grid-template-areas 属性允许你通过可视化方式定义网格布局区域，然后将网格项目放置到这些区域中。这对于构建主要的页面布局结构（如头部、侧边栏、主体内容、底部）非常直观。

该属性的值是一个字符串列表，每个字符串代表网格中的一行，字符串中的每个单词代表一个网格单元，多个相同的单词连在一起形成一个矩形区域。点号 . 代表一个空的网格单元。

例如，一个典型的页面布局：

“`css
.container {
display: grid;
grid-template-columns: 1fr 3fr 1fr; / 定义三列 /
grid-template-rows: auto 1fr auto; / 定义三行：头部、主体、底部 /
grid-template-areas:
“header header header” / 第一行：头部占据三列 /
“nav main aside” / 第二行：导航、主体、侧边栏 /
“footer footer footer”; / 第三行：底部占据三列 /
}

/ 将网格项目放置到对应的区域 /
.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
“`

使用 grid-template-areas 的优点：

• 直观性: CSS 代码直接反映了布局的视觉结构。
• 易于修改: 调整布局只需修改 grid-template-areas 的字符串排列。
• 响应式友好: 在媒体查询中改变 grid-template-areas 是实现不同屏幕下布局切换的常用方法。

使用 grid-template-areas 的限制：

• 定义的区域必须是矩形。
• 不能跨越非矩形区域。

4.8 grid-template 缩写

grid-template 是 grid-template-rows, grid-template-columns, 和 grid-template-areas 的缩写。

语法：grid-template: <grid-template-rows> / <grid-template-columns>; 或结合区域：grid-template: "<row-areas>" ... / <grid-template-columns>;

例如：

“`css
/ 定义两行 (100px auto)，三列 (1fr 1fr 1fr) /
.container {
display: grid;
grid-template: 100px auto / repeat(3, 1fr);
}

/ 定义带区域的布局 /
.container {
display: grid;
grid-template:
“header header header” auto / 第一行区域，高度 auto /
“nav main aside” 1fr / 第二行区域，高度 1fr /
“footer footer footer” auto / / 第三行区域，高度 auto /
1fr 3fr 1fr; / 列宽定义 /
}
“`

缩写形式虽然简洁，但可读性可能不如单独设置各个属性，尤其对于新手来说。

4.9 gap 属性 (旧称 grid-gap)

gap 属性用于在网格轨道之间设置间隙（gutters）。它是 row-gap 和 column-gap 的缩写。

• row-gap: 设置行之间的间隙。
• column-gap: 设置列之间的间隙。
• gap: <row-gap> <column-gap>；如果只提供一个值，则行和列间隙相同。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);

gap: 20px; / 行和列间隙都是 20px /
/ 等同于 row-gap: 20px; column-gap: 20px; /

/ gap: 10px 20px; / / 行间隙 10px，列间隙 20px /
}
``
请注意，gap(以及row-gap和column-gap) 是 Grid 和 Flexbox 布局通用的属性，只是在 Grid 中它们最初被称为grid-gap等，后来被标准化并去掉了前缀。现在推荐使用不带grid-` 前缀的属性名。

5. 控制网格项目位置和尺寸

定义了网格结构后，Grid 项目会自动按照源代码顺序填充网格单元。但你可以通过 Grid 项目上的属性来精确控制它们占据哪些网格单元，以及跨越多少行或列。

主要属性：

• grid-column-start: 项目起始列线。
• grid-column-end: 项目结束列线。
• grid-row-start: 项目起始行线。
• grid-row-end: 项目结束行线。
• grid-column: grid-column-start 和 grid-column-end 的缩写。
• grid-row: grid-row-start 和 grid-row-end 的缩写。
• grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end 的缩写，或者用于指定区域名称。

这些属性的值可以是：

• 网格线数字: 使用数字编号来指定起始或结束线。
• 网格线名称: 如果你给网格线定义了名称，可以使用名称。
• span <number>: 从起始线开始，跨越指定的网格轨道数。
• span <name>: 从起始线开始，跨越到具有指定名称的下一条线。
• auto (默认): 自动放置和跨越。

5.1 使用网格线数字/名称定位

假设有一个 3×3 的网格：

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); / 4 条列线: 1, 2, 3, 4 /
grid-template-rows: repeat(3, 1fr); / 4 条行线: 1, 2, 3, 4 /
}

/ 将第二个项目放置到第二行第二列 /
.item:nth-child(2) {
grid-column-start: 2; / 从第 2 条列线开始 /
grid-column-end: 3; / 到第 3 条列线结束 /
grid-row-start: 2; / 从第 2 条行线开始 /
grid-row-end: 3; / 到第 3 条行线结束 /
}
“`
使用缩写形式：

css
.item:nth-child(2) {
grid-column: 2 / 3; /* 从列线 2 到列线 3 */
grid-row: 2 / 3; /* 从行线 2 到行线 3 */
}

或者更简洁的 grid-area 缩写：

css
.item:nth-child(2) {
grid-area: 2 / 2 / 3 / 3; /* row-start / column-start / row-end / column-end */
}

如果使用了命名网格线，可以直接使用名称：

“`css
.container {
display: grid;
grid-template-columns: [c1] 1fr [c2] 1fr [c3] 1fr [c4];
grid-template-rows: [r1] 1fr [r2] 1fr [r3] 1fr [r4];
}

.item:nth-child(2) {
grid-column: c2 / c3;
grid-row: r2 / r3;
}
“`

5.2 使用 span 跨越网格轨道

span 关键字允许项目跨越指定数量的轨道。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}

/ 第一个项目从第 1 条列线开始，跨越 2 列 /
.item:first-child {
grid-column-start: 1;
grid-column-end: span 2; / 跨越 2 个列轨道 /
/ 等同于 grid-column: 1 / span 2; /
/ 等同于 grid-column: 1 / 3; /

grid-row: span 2; / 从自动放置的行开始，跨越 2 个行轨道 /
}
``
一个项目可以只指定start或end线，然后使用span来定义跨越的轨道数。如果没有指定start` 线，它将从自动放置的起始线开始跨越。

5.3 负数网格线编号

网格线也可以使用负数编号，表示从结束线开始倒数。最后一条线是 -1，倒数第二条是 -2，依此类推。这在你不确定网格有多少行/列时非常有用，例如，你可以将项目定位到最后一列或最后一行。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); / 4 条列线: 1, 2, 3, 4 或 -4, -3, -2, -1 /
}

/ 将第一个项目放置到最后一列 /
.item:first-child {
grid-column-start: 3; / 从第 3 条列线开始 /
grid-column-end: -1; / 到最后一条列线结束 /
/ 等同于 grid-column: 3 / 4; /
}
“`

5.4 使用 grid-area 放置项目到命名区域

如前所述，如果Grid容器使用 grid-template-areas 定义了区域，Grid项目可以直接使用 grid-area 属性将其放置到对应的区域中。

css
.header {
grid-area: header; /* 放置到名为 "header" 的区域 */
}

这是将项目关联到网格区域的最简单、最推荐的方法。

6. 对齐控制

CSS Grid 提供了强大的对齐功能，可以控制网格内容（轨道本身）以及网格项目在单元格内的对齐方式。

记住：

• justify-*: 控制项目在内联轴（通常是水平方向，对应列）上的对齐。
• align-*: 控制项目在块级轴（通常是垂直方向，对应行）上的对齐。

这些属性可以应用于 Grid 容器 (justify-items, align-items, justify-content, align-content) 或 Grid 项目 (justify-self, align-self)。

6.1 Grid 容器上的对齐属性 (控制项目)

这些属性控制网格容器中所有 Grid 项目在其所在的网格单元格内的对齐方式。

• justify-items: 控制所有项目在其列轨道内的水平对齐。
• align-items: 控制所有项目在其行轨道内的垂直对齐。
• place-items: align-items 和 justify-items 的缩写 (<align-items> <justify-items>)。

常用值：

• stretch (默认): 项目拉伸填充整个网格单元格。
• start: 项目靠单元格的起始边缘对齐。
• end: 项目靠单元格的结束边缘对齐。
• center: 项目在单元格内居中对齐。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 100px); / 列宽固定，项目宽度可能小于单元格 /
grid-template-rows: repeat(2, 100px); / 行高固定，项目高度可能小于单元格 /

justify-items: center; / 所有项目在其列方向（水平）居中 /
align-items: start; / 所有项目在其行方向（垂直）靠顶部对齐 /

/ place-items: start center; 等同于上面两行 /
}
“`

6.2 Grid 项目上的对齐属性 (控制自身)

这些属性允许你覆盖 Grid 容器上的对齐设置，单独控制某个 Grid 项目在其所在单元格内的对齐方式。

• justify-self: 控制自身在其列轨道内的水平对齐。
• align-self: 控制自身在其行轨道内的垂直对齐。
• place-self: align-self 和 justify-self 的缩写 (<align-self> <justify-self>)。

常用值与容器属性相同：stretch (默认), start, end, center.

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);

justify-items: center; / 所有项目水平居中 /
align-items: center; / 所有项目垂直居中 /
}

/ 让第二个项目水平靠左对齐，覆盖容器设置 /
.item:nth-child(2) {
justify-self: start;
align-self: end; / 垂直靠下对齐 /

/ place-self: end start; 等同于上面两行 /
}
“`

6.3 Grid 容器上的对齐属性 (控制网格内容)

这些属性控制网格轨道本身在 Grid 容器内的对齐方式。当网格的总尺寸小于 Grid 容器的尺寸时，这些属性用于分配剩余空间。

• justify-content: 控制整个网格内容在内联轴（通常是水平方向）上的对齐。
• align-content: 控制整个网格内容在块级轴（通常是垂直方向）上的对齐。
• place-content: align-content 和 justify-content 的缩写 (<align-content> <justify-content>)。

常用值：

• start: 网格内容靠容器的起始边缘对齐。
• end: 网格内容靠容器的结束边缘对齐。
• center: 网格内容在容器内居中对齐。
• stretch: 网格轨道拉伸以填充容器（仅适用于 auto 或 fr 尺寸的轨道）。
• space-around: 每个网格轨道周围分配相等的空间。
• space-between: 第一个轨道靠起始边缘对齐，最后一个轨道靠结束边缘对齐，剩余空间均匀分布在轨道之间。
• space-evenly: 所有网格轨道之间及两端分配相等的空间。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 100px); / 总宽度 300px /
grid-template-rows: repeat(2, 100px); / 总高度 200px /
width: 500px; / 容器宽度大于网格总宽度 /
height: 400px; / 容器高度大于网格总高度 /

justify-content: space-between; / 列轨道之间均匀分布剩余水平空间 /
align-content: center; / 所有行轨道作为一个整体在垂直方向居中 /

/ place-content: center space-between; 等同于上面两行 /
}
“`

这套对齐属性与 Flexbox 的对齐属性非常相似，如果你熟悉 Flexbox，会很快上手 Grid 的对齐。

7. 自动填充和自动流：Implicit Grid

前面我们讨论的 grid-template-* 属性定义的是显式网格 (Explicit Grid)。然而，当 Grid 项目的数量多于显式定义的网格单元时，或者当你将项目放置到显式网格之外的区域时，Grid 布局会自动创建额外的行或列来容纳这些项目，这部分网格被称为隐式网格 (Implicit Grid)。

你可以通过以下属性来控制隐式网格的行为：

• grid-auto-flow: 控制自动放置算法如何填充隐式网格。
  • row (默认): 按行方向填充，当一行填满时创建新行。
  • column: 按列方向填充，当一列填满时创建新列。
  • dense: 尝试将较小的项目填入网格中较早的空白位置，可能导致项目顺序与源代码顺序不同。
  • row dense 或 column dense。
• grid-auto-rows: 设置隐式创建的行轨道的尺寸。
• grid-auto-columns: 设置隐式创建的列轨道的尺寸。

“`css
.container {
display: grid;
grid-template-columns: repeat(3, 100px); / 显式定义 3 列 /
/ 没有显式定义行 /

grid-auto-rows: 50px; / 隐式创建的行高度为 50px /
grid-auto-flow: row; / 默认值，按行填充 /
}
/ 如果这个容器有 10 个项目，前 3 个在一行，4-6 在第二行，7-9 在第三行，10 在第四行。
第四行就是隐式创建的行，其高度为 50px。 /

.container-column {
display: grid;
grid-template-rows: repeat(3, 100px); / 显式定义 3 行 /
/ 没有显式定义列 /

grid-auto-columns: 50px; / 隐式创建的列宽度为 50px /
grid-auto-flow: column; / 按列填充 /
}
/ 如果这个容器有 10 个项目，前 3 个在一列，4-6 在第二列，7-9 在第三列，10 在第四列。
第四列就是隐式创建的列，其宽度为 50px。 /
“`

grid-auto-rows 和 grid-auto-columns 也接受像 auto, fr, minmax() 等尺寸单位。

8. grid 缩写属性

grid 属性是 grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow 的超级缩写。

它的语法非常复杂，通常不推荐在生产环境中使用，以免降低可读性。它的大致格式如下：

grid: <grid-template-rows> / <grid-template-columns>;
或
grid: <grid-auto-flow> <grid-auto-rows> / <grid-auto-columns>;
或结合区域：
grid: [<grid-template-areas> ...] / <grid-template-columns>;

例如：
“`css
/ 设置显式行高 100px auto，显式列宽 1fr 2fr /
.container {
grid: 100px auto / 1fr 2fr;
}

/ 设置隐式流方向为 column，隐式列宽 50px，显式行高 100px auto /
.container {
grid: column auto / 50px repeat(2, 1fr); / auto 用于 grid-auto-rows，这里会重置为默认 /
/ 更清晰的写法是单独设置 grid-auto-flow: column; grid-auto-columns: 50px;
然后 grid-template-rows: 100px auto; /
}
“`
由于其复杂性，对于初学者，建议分开使用各个独立的 Grid 属性。

9. Grid 布局与响应式设计

CSS Grid 布局天生就非常适合响应式设计。你可以利用媒体查询 @media 来改变 Grid 容器的属性，从而在不同屏幕尺寸下呈现不同的布局。

最常见的响应式 Grid 技巧包括：

1. 改变 grid-template-columns 或 grid-template-rows: 根据屏幕宽度调整列的数量和宽度，或行的数量和高度。例如，在小屏幕上变为单列，在大屏幕上变为多列。
2. 改变 grid-template-areas: 在不同屏幕尺寸下完全改变布局区域的排列方式。这是实现复杂响应式布局（如切换侧边栏位置或隐藏某些区域）的最直观方法。
3. 使用 repeat(auto-fit/auto-fill, minmax(min, max)): 如前所述，结合 minmax() 和 auto-fit/auto-fill 可以创建自适应列数和列宽的网格，无需媒体查询即可实现基础响应式。
4. 改变 Grid 项目的位置 (grid-area, grid-column, grid-row): 根据屏幕尺寸调整单个项目的位置。

示例：使用 grid-template-areas 实现简单的响应式布局切换

HTML 结构 (与前面区域布局示例相同):
“`html

“`

CSS:
“`css
.container {
display: grid;
gap: 10px; / 添加间隙 /
min-height: 100vh; / 确保容器有足够高度看到垂直布局变化 /
}

/ 默认布局 (小屏幕优先) /
.container {
grid-template-columns: 1fr; / 默认单列 /
grid-template-rows: auto auto 1fr auto auto; / header, nav, main, aside, footer /
grid-template-areas:
“header”
“nav”
“main”
“aside”
“footer”;
}

/ 项目放置 (在所有屏幕尺寸下都有效，因为区域名称不变) /
.header { grid-area: header; background-color: lightblue; padding: 10px; }
.nav { grid-area: nav; background-color: lightgreen; padding: 10px; }
.main { grid-area: main; background-color: lightcoral; padding: 10px; }
.aside { grid-area: aside; background-color: lightsalmon; padding: 10px; }
.footer { grid-area: footer; background-color: lightgray; padding: 10px; }

/ 大屏幕布局 (例如，大于 768px 时) /
@media (min-width: 768px) {
.container {
grid-template-columns: 200px 1fr 150px; / 左侧导航，中间主体，右侧侧边栏 /
grid-template-rows: auto 1fr auto; / header, main/nav/aside, footer /
grid-template-areas:
“header header header”
“nav main aside”
“footer footer footer”;
}
}
“`
通过上面的例子可以看到，Grid 结合媒体查询可以非常轻松地实现复杂的布局切换，极大地提高了响应式开发的效率。

10. Grid 与 Flexbox 的选择

Grid 和 Flexbox 都是强大的布局工具，但它们解决的问题略有不同：

• Grid: 用于二维布局，同时控制行和列。适合构建整个页面框架、复杂组件（如相册、仪表盘）等。
• Flexbox: 用于一维布局，控制一组项目沿单个轴（行或列）的对齐和分布。适合构建导航菜单、按钮组、表单元素等小型组件，或者在 Grid 单元格内部对齐内容。

它们不是互斥的，而是可以并且经常一起使用。例如，你可以使用 Grid 构建主页面布局，然后在 Grid 容器内的某个 Grid 项目（例如侧边栏或页脚）内部使用 Flexbox 来排列其子元素。反之亦然，一个 Flex 项目内部也可以是一个 Grid 容器。

经验法则：

• 需要控制行和列同时布局时 → 使用 Grid
• 需要控制一组项目沿单个方向排列和对齐时 → 使用 Flexbox

11. 浏览器兼容性

CSS Grid 布局现代浏览器支持已经非常完善，包括 Chrome, Firefox, Edge, Safari 等。对于需要支持老版本 IE 的项目，可能需要考虑回退方案或使用 Autoprefixer 等工具来处理旧版本的语法（虽然不推荐花太多精力在旧 IE 的完整 Grid 支持上）。通常，对于需要 IE 支持的项目，核心布局可能仍依赖浮动或 Flexbox，而 Grid 用于渐进增强。

你可以访问 Can I Use 查看详细的浏览器支持情况。

12. 总结与进阶

恭喜你！你已经完成了 CSS Grid 布局的入门学习。我们涵盖了 Grid 容器和项目的主要属性，包括：

• display: grid | inline-grid; (开启 Grid 布局)
• grid-template-columns, grid-template-rows (定义显式网格结构)
• fr, auto, minmax(), repeat() (定义轨道尺寸和模式)
• gap, row-gap, column-gap (设置间隙)
• grid-template-areas (使用命名区域布局)
• grid-column, grid-row, grid-area (定位和跨越项目)
• justify-items, align-items, place-items (项目在单元格内的对齐)
• justify-content, align-content, place-content (网格内容在容器内的对齐)
• justify-self, align-self, place-self (单个项目的对齐)
• grid-auto-flow, grid-auto-rows, grid-auto-columns (控制隐式网格)

Grid 布局是一个强大的工具，需要多加实践才能真正掌握。尝试用 Grid 重建你熟悉的网页布局，或者练习实现一些复杂的网格设计。

进阶学习方向：

• 深入理解 auto-fit vs auto-fill。
• 探索 grid-auto-flow: dense; 的用法。
• 学习更多 Grid 布局的常见模式。
• 查阅 MDN 文档和 CSS-Tricks 的完整指南获取更详细的信息和属性解释。
• 尝试使用 Grid Inspector 等浏览器开发者工具来调试 Grid 布局。

Grid 布局极大地简化了现代网页的二维布局任务，让我们可以用更少、更清晰的代码实现以前需要复杂 hack 的效果。掌握 Grid，你将能够更自信、高效地构建各种复杂的网页界面。

现在，是时候打开你的代码编辑器，亲自动手实践了！

---

希望这篇详细的教程对你理解和开始使用 CSS Grid 布局有所帮助。祝你编码愉快！