Grid布局语法
CSS Grid 布局语法完整总结，包含结构化讲解 + 常用示例，让你面试/实战都能用上。
# 🧩 一、什么是 Grid 布局？
Grid（网格布局） 是 CSS3 提供的一种强大的二维布局系统， 能同时在 行（row） 和 列（column） 两个方向上精确控制元素的位置。
📌 对比：
- Flex → 一维布局（只能控制行或列）
- Grid → 二维布局（行 + 列）
# 📐 二、基本结构
# 🧱 三、核心语法
# 1️⃣ display: grid | inline-grid
开启网格布局。
inline-grid 表示容器是行内元素。
# 2️⃣ grid-template-columns / grid-template-rows
定义列和行的尺寸。
grid-template-columns: 100px 200px auto;
grid-template-rows: 100px 100px;
1
2
2
✅ 常用单位：
| 单位 | 说明 |
|---|---|
px / % / em | 固定或相对尺寸 |
fr | “比例分配”单位（最常用） |
auto | 根据内容自动调整 |
minmax(min, max) | 设置最小、最大范围 |
示例：
grid-template-columns: 1fr 2fr 1fr;
1
表示 3 列，宽度比例 1:2:1。
# 3️⃣ gap / row-gap / column-gap
定义行列之间的间距。
gap: 10px; /* 行列间距 */
row-gap: 20px;
column-gap: 15px;
1
2
3
2
3
# 4️⃣ grid-template-areas
定义区域布局（语义化强，适合复杂页面结构）。
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 5️⃣ grid-auto-rows / grid-auto-columns
当内容超出定义的模板行/列时，用于自动生成额外的行或列的大小。
grid-auto-rows: 100px;
1
# 6️⃣ grid-auto-flow
控制自动放置算法的方向。
grid-auto-flow: row | column | row dense | column dense;
1
row（默认）：从左到右、从上到下。column：从上到下、从左到右。dense：填补空隙（可能打乱顺序）。
# 📦 四、子项（Grid Item）定位语法
# 1️⃣ 基于行列编号定位
.item1 {
grid-column-start: 1;
grid-column-end: 3; /* 跨两列 */
grid-row-start: 1;
grid-row-end: 2;
}
1
2
3
4
5
6
2
3
4
5
6
简写形式：
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
1
2
3
4
2
3
4
# 2️⃣ 跨行 / 跨列
.item {
grid-column: span 2; /* 跨两列 */
grid-row: span 3; /* 跨三行 */
}
1
2
3
4
2
3
4
# 3️⃣ 自动对齐
| 属性 | 作用范围 | 值 |
|---|---|---|
justify-items | 沿水平方向对齐每个单元格的内容 | start / center / end / stretch |
align-items | 沿垂直方向对齐每个单元格的内容 | 同上 |
place-items | 简写 | align-items justify-items |
.grid-container {
place-items: center; /* 水平 + 垂直都居中 */
}
1
2
3
2
3
# 4️⃣ 对齐整个网格内容
| 属性 | 作用范围 | 值 |
|---|---|---|
justify-content | 网格整体在容器内的水平对齐 | start / center / end / space-between / space-around |
align-content | 网格整体在容器内的垂直对齐 | 同上 |
place-content | 简写 | align-content justify-content |
# 5️⃣ 单个子项对齐（覆盖全局）
.item1 {
justify-self: end;
align-self: center;
}
1
2
3
4
2
3
4
或简写：
.item1 {
place-self: center end;
}
1
2
3
2
3
# 🧮 五、repeat() 函数
简化重复列定义：
grid-template-columns: repeat(3, 1fr);
1
等价于：
grid-template-columns: 1fr 1fr 1fr;
1
也支持混合写法：
grid-template-columns: 100px repeat(2, 1fr) 200px;
1
# 🧠 六、auto-fit / auto-fill 响应式布局
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
1
2
3
4
5
2
3
4
5
✅ 区别：
auto-fill：尽可能多地填充列（空格仍占位）auto-fit：自动折叠空列（自适应填满）
# 🧭 七、命名线（命名行列）
grid-template-columns: [left] 1fr [middle] 2fr [right];
.item {
grid-column: left / right; /* 使用命名行定位 */
}
1
2
3
4
2
3
4
# 🧰 八、实战案例：常见布局
# ✅ 三列布局（中间自适应）
.grid-container {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
1
2
3
4
2
3
4
# ✅ 瀑布流布局（dense 填补）
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-auto-rows: 150px;
grid-auto-flow: dense;
}
1
2
3
4
5
6
2
3
4
5
6
# ⚡ 九、Grid 与 Flex 对比总结
| 特性 | Flex | Grid |
|---|---|---|
| 布局维度 | 一维（行/列） | 二维（行+列） |
| 对齐 | 主轴/交叉轴 | 行/列两维度 |
| 内容对齐 | 灵活 | 精确 |
| 响应式布局 | 需要嵌套 | 一步到位 |
| 使用场景 | 局部、组件内布局 | 页面整体布局 |
# 🧭 十、结构化总结（思维导图）
CSS Grid 布局
├── display: grid / inline-grid
├── 行列定义
│ ├── grid-template-columns / rows
│ ├── repeat() / minmax()
│ ├── auto-fit / auto-fill
│ └── gap / row-gap / column-gap
├── 自动布局
│ ├── grid-auto-flow
│ ├── grid-auto-rows / columns
├── 区域布局
│ ├── grid-template-areas
│ ├── grid-area（子项）
├── 对齐控制
│ ├── justify-items / align-items / place-items
│ ├── justify-content / align-content / place-content
│ └── justify-self / align-self / place-self
├── 子项定位
│ ├── grid-row / grid-column
│ └── span / 命名线
├── 函数
│ ├── repeat()
│ ├── minmax()
│ ├── fit-content()
└── 实战应用
├── 三列布局
├── 瀑布流
├── 自适应卡片网格
└── Dashboard布局
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
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
上次更新: 2025/11/25, 03:24:47