介绍
CSS Grid Layout（网格布局）是最强大的 CSS 布局系统，它提供二维布局能力，能够精确控制行（row）和列（column），适用于网页整体结构或复杂组件
Grid 容器（Grid Container）
使用 display: grid 或 display: inline-grid 声明一个 Grid 容器：
1
2
3
|
.container {
display: grid; /* 定义一个网格布局容器 */
}
|
📌 grid VS inline-grid：
- grid：块级网格容器，占据整行
- inline-grid：内联级网格容器，大小由内容决定
定义网格（行和列）
使用 grid-template-columns 和 grid-template-rows 定义列数和行数：
1
2
3
4
5
|
.container {
display: grid;
grid-template-columns: 200px 100px auto; /* 3 列 */
grid-template-rows: 100px 200px; /* 2 行 */
}
|
📌 解释：
- 200px 100px auto → 3 列，分别为 200px、100px 和剩余宽度
- 100px 200px → 2 行，分别 100px、200px
fr（网格比例单位）
用 fr 让网格自动分配可用空间：
1
2
3
4
|
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 按比例划分列 */
}
|
📌 1fr 2fr 1fr → 这三列的宽度比例为 1:2:1（类似 flex-grow）
repeat()（简化网格）
使用 repeat() 让代码更简洁：
1
2
|
grid-template-columns: repeat(3, 1fr); /* 3 列，每列等宽 */
grid-template-rows: repeat(2, 100px); /* 2 行，每行 100px */
|
📌 repeat(3, 1fr) → 相当于 1fr 1fr 1fr
gap（网格间距）
1
2
3
4
5
|
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px; /* 设置行列间距 */
}
|
📌 等价于：
1
2
|
row-gap: 20px; /* 仅设置行间距 */
column-gap: 20px; /* 仅设置列间距 */
|
自动填充 auto-fill & auto-fit
用于响应式布局：
1
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
📌 解释：
- minmax(150px, 1fr) → 设定最小 150px，最大填充剩余空间
- auto-fill → 尽可能多填充列，即使有空白
- auto-fit → 适配列数，会压缩空列
子元素布局
grid-column & grid-row（控制网格项位置）
1
2
3
4
|
.item {
grid-column: 1 / 3; /* 让元素跨越第 1 ~ 2 列 */
grid-row: 1 / 3; /* 让元素跨越第 1 ~ 2 行 */
}
|
📌 等价于：
1
2
3
4
|
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
|
span 语法
1
2
3
4
|
.item {
grid-column: span 2; /* 让元素跨 2 列 */
grid-row: span 2; /* 让元素跨 2 行 */
}
|
grid-auto-rows & grid-auto-columns
用于自动生成额外的行/列：
1
2
3
4
|
.container {
grid-template-columns: 200px 200px; /* 2 列 */
grid-auto-rows: 100px; /* 额外行高 100px */
}
|
justify-content & align-content（网格整体对齐）
用于控制整个网格的对齐方式：
1
2
3
4
5
|
.container {
display: grid;
justify-content: center; /* 水平对齐 */
align-content: center; /* 垂直对齐 */
}
|
| 属性 |
作用 |
可选值 |
| justify-content |
控制水平方向 |
start / center / end / space-between / space-around / space-evenly |
| align-content |
控制垂直方向 |
同上 |
justify-items & align-items（网格项对齐）
用于控制单个网格项的对齐：
1
2
3
4
|
.container {
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
|
📌 作用对象：
- justify-items 影响所有网格项的水平对齐
- align-items 影响所有网格项的垂直对齐
justify-self & align-self（单个网格项对齐）
1
2
3
4
|
.item {
justify-self: center; /* 仅影响当前元素的水平对齐 */
align-self: center; /* 仅影响当前元素的垂直对齐 */
}
|
📌 区别：
- justify-self 控制单个网格项的水平位置
- align-self 控制单个网格项的垂直位置
grid-template-areas（网格布局命名）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.container {
display: grid;
grid-template-areas:
'header header header'
'sidebar content content'
'footer footer footer';
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px auto 60px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
|