《模组布局设计核心技巧》
第4章 Grid网格布局
# 4、Grid网格布局：网格容器、网格轨道、网格线、网格区域、隐式网格
## 4.1 网格容器（Grid Container）
Grid布局是CSS中最强大的二维布局系统。要使用Grid布局，首先需要将父元素设置为**网格容器**，其直接子元素自动成为**网格项**。
css
.container {
display: grid; /* 块级网格容器 */
/* 或 */
display: inline-grid; /* 内联级网格容器 */
}
设置网格容器后，子元素的`float`、`display: inline-block`、`vertical-align`等属性将失效，布局完全由Grid规则控制。
## 4.2 网格轨道（Grid Tracks）
网格轨道是网格的行与列。通过`grid-template-columns`和`grid-template-rows`定义轨道的数量和尺寸。
### 4.2.1 基本轨道定义
css
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* 三列：固定200px + 弹性比例 */
grid-template-rows: 100px auto 100px; /* 三行：固定 + 自适应 + 固定 */
gap: 16px; /* 轨道间距 */
}
### 4.2.2 轨道单位与函数
| 单位/函数 | 说明 | 示例 |
|-----------|------|------|
| `px` | 固定像素值 | `200px` |
| `fr` | 剩余空间比例分配 | `1fr 2fr` |
| `%` | 相对于容器百分比 | `30%` |
| `auto` | 内容自适应 | `auto` |
| `minmax()` | 最小/最大尺寸约束 | `minmax(100px, 1fr)` |
| `repeat()` | 重复轨道模式 | `repeat(3, 1fr)` |
| `fit-content()` | 内容自适应，不超过最大值 | `fit-content(300px)` |
### 4.2.3 轨道定义SVG示意图
## 4.3 网格线（Grid Lines）
网格线是划分轨道的分界线，从1开始编号。网格线可用于精确定位网格项。
### 4.3.1 网格线编号规则
列网格线： 1 2 3 4
| 列1 | 列2 | 列3 |
行网格线：1
| 行1 | | |
2
| 行2 | | |
3
| 行3 | | |
4
### 4.3.2 使用网格线定位
css
.item {
grid-column-start: 1; /* 起始列线 */
grid-column-end: 3; /* 结束列线 */
grid-row-start: 2; /* 起始行线 */
grid-row-end: 4; /* 结束行线 */
/* 简写 */
grid-column: 1 / 3;
grid-row: 2 / 4;
/* 或更简写 */
grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
}
### 4.3.3 命名网格线
css
.container {
grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
grid-template-rows: [header-start] 80px [header-end content-start] auto [content-end footer-start] 60px [footer-end];
}
.header {
grid-column: main-start / main-end;
grid-row: header-start / header-end;
}
### 4.3.4 网格线定位SVG示意图
## 4.4 网格区域（Grid Areas）
网格区域是网格线的矩形区域，通过`grid-template-areas`命名区域，实现直观的布局。
### 4.4.1 区域命名布局
css
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
gap: 12px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
### 4.4.2 区域命名规则
- 每个单元格必须填充一个区域名称
- 使用`.`表示空单元格
- 同一区域必须形成矩形，不能是L形或T形
- 区域名称区分大小写
css
/* 复杂布局示例 */
grid-template-areas:
"logo nav nav"
"sidebar main ."
"sidebar footer footer";
### 4.4.3 网格区域布局SVG示意图
## 4.5 隐式网格（Implicit Grid）
当网格项超出显式定义的轨道范围时，Grid会自动创建**隐式轨道**来容纳这些项。
### 4.5.1 隐式轨道控制
css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 显式定义3列 */
grid-template-rows: 100px; /* 显式定义1行 */
/* 控制隐式轨道尺寸 */
grid-auto-rows: 80px; /* 隐式行高 */
grid-auto-columns: 200px; /* 隐式列宽 */
grid-auto-flow: row; /* 自动排列方向：row/column/dense */
}
### 4.5.2 grid-auto-flow 详解
| 值 | 说明 | 适用场景 |
|----|------|----------|
| `row` | 按行填充，必要时创建新行 | 默认值，适合横向内容流 |
| `column` | 按列填充，必要时创建新列 | 纵向内容流 |
| `row dense` | 按行填充，并尝试填充空隙 | 大小不一的网格项 |
| `column dense` | 按列填充，并尝试填充空隙 | 大小不一的网格项 |
### 4.5.3 隐式网格示例
css
/* 隐式网格自动创建行 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
}
/* 有6个子元素，显式只定义了行，Grid自动创建第2行 */
### 4.5.4 隐式网格SVG示意图
## 4.6 综合实战：Dashboard面板布局
css
.dashboard {
display: grid;
grid-template-columns:
[sidebar-start] 240px
[sidebar-end main-start] 1fr
[main-end];
grid-template-rows:
[header-start] 64px
[header-end content-start] 1fr
[content-end footer-start] 48px
[footer-end];
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar footer";
height: 100vh;
gap: 0;
}
.sidebar {
grid-area: sidebar;
background: #2c3e50;
color: #ecf0f1;
padding: 20px;
}
.header {
grid-area: header;
background: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 0 24px;
display: flex;
align-items: center;
}
.content {
grid-area: content;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 24px;
overflow-y: auto;
}
.footer {
grid-area: footer;
background: #f8f9fa;
border-top: 1px solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #6c757d;
}
## 4.7 最佳实践与注意事项
💡 最佳实践：
- 优先使用
grid-template-areas 进行语义化布局，代码可读性更高
- 使用
minmax() 结合 auto-fill 或 auto-fit 实现响应式网格
- 隐式网格的
grid-auto-rows 建议设置为 minmax()，避免内容溢出
- 命名网格线时使用有意义的名称，如
sidebar-start、content-end
⚠️ 常见陷阱：
- 网格项的外边距不会折叠，与普通流式布局不同
grid-template-areas 中的区域必须形成矩形，不能有空洞- 隐式网格的尺寸不会影响显式网格的布局，但可能造成视觉上的不协调
- 使用
dense 关键字时，网格项可能不按DOM顺序排列，影响可访问性
## 4.8 本章小结
Grid网格布局提供了精确的二维控制能力。掌握网格容器、轨道、线、区域和隐式网格这五大核心概念，就能构建从简单到复杂的各种布局。建议在实际项目中多使用`grid-template-areas`进行布局规划，配合`minmax()`和`auto-fill`实现灵活的响应式设计。