CSS3引入了强大的网格布局（Grid Layout），它提供了一种二维的布局方式，使得创建复杂的网页布局变得更加简单和直观。通过定义行和列，我们可以精确控制网页元素的排列和对齐。本章将详细介绍网格布局的基本概念和属性，并通过具体示例帮助读者掌握如何使用网格布局。
7.1 网格布局简介
网格布局是一种二维布局系统，允许我们在水平和垂直两个方向上定义布局。它由网格容器（grid container）和网格项目（grid item）组成。网格布局非常灵活，适合创建复杂和响应式的网页设计。
特点
二维布局：同时控制行和列的排列。
灵活的尺寸：使用网格单元和轨道，可以创建灵活的布局。
简化复杂布局：能够轻松实现传统布局方法中难以实现的设计，如垂直居中、等高列等。
7.2 网格容器与项目
网格容器是应用网格布局的元素，网格项目是网格容器内的直接子元素。
示例
1
2
3
4
5
6
.grid-container {
display: grid; / 定义网格容器 /
grid-template-columns: repeat(2, 1fr); / 定义两列，每列占1fr（比例单位） /
grid-template-rows: repeat(2, 100px); / 定义两行，每行100px高 /
gap: 10px; / 设置行和列之间的间距 /
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
7.3 网格布局属性详解
网格容器属性
display: grid：将元素定义为网格容器。
示例：
.grid-container {
display: grid;
}
1
2
3
grid-template-columns：定义列的布局。
取值：长度值（如100px）、比例单位（如1fr）、百分比（如50%）、auto、repeat()函数等。
示例：
.grid-container {
grid-template-columns: 1fr 2fr; / 第一列占1份，第二列占2份 /
}
1
2
3
grid-template-rows：定义行的布局。
取值与grid-template-columns相同。
示例：
.grid-container {
grid-template-rows: 100px auto; / 第一行100px高，第二行自动分配剩余空间 /
}
1
2
3
gap（或grid-gap）：设置网格项目之间的间距。
取值：长度值，如10px。
示例：
.grid-container {
gap: 10px; / 设置行和列之间的间距 /
}
1
2
3
grid-template-areas：定义命名的网格区域。
示例：
.grid-container {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
justify-items：定义网格项目在水平方向上的对齐方式。
取值：start、end、center、stretch。
示例：
.grid-container {
justify-items: center; / 所有项目在水平方向上居中对齐 /
}
1
2
3
align-items：定义网格项目在垂直方向上的对齐方式。
取值与justify-items相同。
示例：
.grid-container {
align-items: center; / 所有项目在垂直方向上居中对齐 /
}
1
2
3
justify-content：定义整个网格容器在水平方向上的对齐方式。
取值：start、end、center、space-between、space-around、space-evenly。
示例：
.grid-container {
justify-content: space-between; / 网格在水平方向上均匀分布 /
}
1
2
3
align-content：定义整个网格容器在垂直方向上的对齐方式。
取值与justify-content相同。
示例：
.grid-container {
align-content: space-around; / 网格在垂直方向上均匀分布 /
}
1
2
3
网格项目属性
grid-column-start和grid-column-end：定义网格项目的列起始和结束位置。
示例：
.grid-item {
grid-column-start: 1; / 列开始位置 /
grid-column-end: 3; / 列结束位置 /
}
1
2
3
4
grid-row-start和grid-row-end：定义网格项目的行起始和结束位置。
示例：
.grid-item {
grid-row-start: 1; / 行开始位置 /
grid-row-end: 3; / 行结束位置 /
}
1
2
3
4
grid-area：可以同时设置项目的行和列位置，结合grid-template-areas使用。
示例：
.grid-item {
grid-area: header; / 使用命名的网格区域 /
}
1
2
3
justify-self：定义单个网格项目在水平方向上的对齐方式。
取值与justify-items相同。
示例：
.grid-item {
justify-self: end; / 单个项目在水平方向上对齐到右边 /
}
1
2
3
align-self：定义单个网格项目在垂直方向上的对齐方式。
取值与align-items相同。
示例：
.grid-item {
align-self: start; / 单个项目在垂直方向上对齐到顶部 /
}
1
2
3
7.4 创建复杂网格布局
网格布局能够轻松创建复杂的网页布局，例如响应式的页面结构和仪表板布局。
示例：响应式三栏布局
1
2
3
4
5
6
.complex-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
}
.header {
grid-area: header;
background-color: #3498db;
color: white;
text-align: center;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #2ecc71;
color: white;
padding: 20px;
}
.content {
grid-area: content;
background-color: #e74c3c;
color: white;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #9b59b6;
color: white;
text-align: center;
padding: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
7.5 网格布局与响应式设计
网格布局与媒体查询结合使用，可以创建响应式设计，适应不同的屏幕尺寸和设备。
示例：响应式网格布局
1
2
3
4
5
6
7
8
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
/ 媒体查询，适配不同屏幕尺寸 /
@media (max-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
}
