CSS Grid 布局基础
Grid 布局是 CSS 中强大的二维布局方案，能够同时控制行和列，适合实现复杂的网格化页面结构。本文从基础概念到高级用法，系统讲解 Grid 布局的核心知识。
学习资源推荐
| 资源 | 说明 |
|---|---|
| MDN Grid 文档 | 官方文档，含示例与代码 |
| CSS Tricks: A Complete Guide to CSS Grid | 分类清晰，左右对照 Grid Container 与 Grid Items |
CSS Tricks 文档的优势：
- 左侧分类索引：Basics、Terminology、Properties、Units/Functions、Code Snippets、Animation
- 左右对照展示 Grid Container 和 Grid Items 的属性与示例
- 2023 年更新，内容时效性好
核心概念
Grid Container（网格容器）
设置 display: grid 或 display: inline-grid 的元素成为网格容器。
.container {
display: grid;
}
css
grid-- 块级网格容器inline-grid-- 行内网格容器
Grid Line（网格线）
网格线是构成 Grid 布局的分割线，不可见但至关重要。它是定位网格项的参考系。
1 2 3 4 （列网格线）
| | | |
--+----+----+----+-- 1 （行网格线）
| 1 | 2 | 3 |
--+----+----+----+-- 2
| 4 | 5 | 6 |
--+----+----+----+-- 3
text
Grid Track（网格轨道）
两条相邻网格线之间的空间，即行或列。对应 Flex 布局中的主轴和交叉轴概念。
Grid Cell（网格单元）
最小的网格单位，由一条行网格线和一条列网格线围成的区域。
Grid Area（网格区域）
由多个 Grid Cell 组成的矩形区域，可以跨越多行多列。
Grid Item（网格项）
Grid Container 的直接子元素。子元素的子元素不受 Grid 布局影响。
Grid Container 属性
grid-template-columns / grid-template-rows
定义网格的列宽和行高。
固定值：
.container {
grid-template-columns: 100px 150px 150px;
grid-template-rows: 100px 150px;
}
css
百分比和视口单位：
.container {
grid-template-columns: 50% 50%;
grid-template-rows: 50vh 50vh;
}
css
repeat() 函数：
/* 基础用法：重复 3 次 150px */
grid-template-rows: repeat(3, 150px);
/* 进阶用法：交替重复 */
grid-template-rows: 100px repeat(3, 100px 150px);
/* 等价于：100px 100px 150px 100px 150px 100px 150px */
css
fr 单位（fraction）：
/* 三等分 */
grid-template-columns: repeat(3, 1fr);
css
注意：
1fr并不严格等于等分。当某个单元格内容超出时，1fr会自动扩展。使用minmax(0, 1fr)可确保真正的等分。
minmax() 函数：
/* 真正的三等分：最小 0，最大均分 */
grid-template-columns: repeat(3, minmax(0, 1fr));
css
| 函数/单位 | 作用 | 示例 |
|---|---|---|
repeat(n, value) | 重复 n 次指定值 | repeat(3, 1fr) |
minmax(min, max) | 设定最小最大值范围 | minmax(0, 1fr) |
fr | 按比例分配剩余空间 | 1fr 2fr |
auto | 自动适配内容大小 | auto 1fr |
grid-template-areas
通过命名区域实现"积木式"布局，是 Grid 最直观的布局方式。
.container {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, auto);
grid-template-areas:
"a a b"
"c d d"
"c e f"
"g h i";
}
css
/* 将元素放置到命名区域 */
.item-1 { grid-area: a; } /* 跨两列 */
.item-2 { grid-area: b; }
.item-3 { grid-area: c; } /* 跨两行 */
css
规则：
- 同一名称可出现多次（表示跨区域）
.表示空白区域- 每行的名称数量必须等于列数
grid-area名称对应grid-template-areas中的标记
grid-template（简写）
grid-template 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的简写：
.container {
grid-template:
"a a b" 100px
"c d d" 150px
"f g h" 150px
"i j k" 150px
/ 1fr 1fr 1fr;
}
css
语法格式："areas" row-height / columns
注意：使用
grid-template简写时，columns 部分必须展开写，不能使用repeat()。
gap
设置网格间距：
.container {
column-gap: 15px; /* 列间距 */
row-gap: 20px; /* 行间距 */
/* 简写：row-gap column-gap */
gap: 20px 10px;
}
css
对齐属性
单元格内容对齐：
/* 水平对齐（每个单元格内的内容） */
justify-items: start | center | end | stretch;
/* 垂直对齐 */
align-items: start | center | end | stretch;
/* 简写 */
place-items: center; /* 等价于 justify-items: center; align-items: center; */
css
网格整体对齐（当网格未占满容器时）：
justify-content: start | center | end | space-between | space-around | space-evenly;
align-content: start | center | end | space-between | space-around | space-evenly;
place-content: center;
css
| 属性 | 作用对象 | 常用值 |
|---|---|---|
justify-items | 单元格内容（水平） | center、end |
align-items | 单元格内容（垂直） | center、end |
place-items | 上述两者的简写 | center |
justify-content | 网格整体（水平） | center、space-between |
align-content | 网格整体（垂直） | center |
place-content | 上述两者的简写 | center |
Grid Item 属性
grid-row / grid-column
通过网格线编号精确定位元素位置。
.item {
/* 从第 3 条行线开始，到第 4 条行线结束 */
grid-row: 3 / 4;
/* 从第 2 条列线开始，横跨 2 条线 */
grid-column: 2 / span 2;
}
css
span 关键字表示横跨的网格线数量：
grid-column: 1 / span 4; /* 从第 1 条列线开始，横跨 4 条线 */
grid-row: 2 / span 2; /* 从第 2 条行线开始，横跨 2 条线 */
css
grid-area
将元素分配到命名区域：
.item-1 { grid-area: a; }
.item-2 { grid-area: b; }
css
实战示例：5 格网格布局
使用 5 个单元格实现课程网格效果：
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: auto auto auto;
}
.item-1 {
grid-row: 1 / 2;
grid-column: 1 / span 4; /* 第一行横跨 4 列 */
}
.item-2 {
grid-row: 2 / span 2; /* 横跨 2 行 */
grid-column: 1 / span 2; /* 横跨 2 列 */
}
.item-3 {
grid-row: 2 / 3;
grid-column: 3 / span 2;
}
.item-4 {
grid-row: 3 / span 1;
grid-column: 3 / span 1;
}
.item-5 {
grid-row: 3 / span 1;
grid-column: 4 / span 1;
}
css
关键要点：
- 先分析设计图，确定每个元素的起始行/列和横跨数量
grid-template-columns的列数应与最细粒度的分割一致- 使用
width: 100%; height: 100%;让元素撑满单元格
在线工具
| 工具 | 说明 |
|---|---|
| CSS Grid Generator（在线） | 可视化拖拽生成 Grid 布局代码 |
| css-grid-generator (GitHub) | 本地运行，适合离线使用 |
这些工具可以大幅提升开发效率，避免手动计算网格线编号出错。
↑