CSS: Grid 项目与对齐
最后更新：2026-10-13
在 Grid 布局中，你可以精确控制每个子元素放在哪个网格单元，以及子元素在网格单元内的对齐方式。
Grid 项目属性速查表
| 属性 | 常用值 | 作用 |
|---|---|---|
grid-column |
1 / 3, span 2, 1 / -1 |
控制项目跨越哪些列 |
grid-row |
1 / 2, span 3 |
控制项目跨越哪些行 |
grid-area |
header, 1 / 1 / 3 / 4 |
项目区域（可配合 grid-template-areas 命名） |
justify-self |
stretch, start, end, center |
项目自身在列方向的对齐 |
align-self |
stretch, start, end, center |
项目自身在行方向的对齐 |
order |
0, 1, -1 |
项目排列顺序（数值越小越靠前） |
1. 项目放置
在定义好网格后，你可以使用以下属性将项目放置到指定的网格位置：
(1) grid-column 和 grid-row
▶ 示例
▶ 试一试网格线编号：网格的线从 1 开始编号。1 / 3 表示从第 1 条线到第 3 条线，占据中间 2 列。
(2) 使用 span 关键字
▶ 示例
▶ 试一试(3) 使用简写
▶ 示例
▶ 试一试2. 项目对齐
(1) 容器上的对齐属性（作用于所有项目）
justify-items： 水平方向对齐（在单元格内）
▶ 示例
▶ 试一试align-items： 垂直方向对齐（在单元格内）
▶ 示例
▶ 试一试place-items： 简写
▶ 示例
▶ 试一试(2) 项目上的对齐属性（作用于单个项目）
justify-self： 单个项目水平对齐（覆盖容器 justify-items）
▶ 示例
▶ 试一试align-self： 单个项目垂直对齐（覆盖容器 align-items）
▶ 示例
▶ 试一试place-self： 简写
▶ 示例
▶ 试一试3. 容器上的整体对齐
当网格的总尺寸小于容器尺寸时，可以用以下属性控制网格整体的位置：
justify-content： 水平方向整体对齐
▶ 示例
▶ 试一试align-content： 垂直方向整体对齐
▶ 示例
▶ 试一试place-content： 简写
▶ 示例
▶ 试一试4. 命名网格区域
(1) grid-template-areas
你还可以给网格区域"命名"，然后通过名称放置项目：
▶ 示例
▶ 试一试这种方法非常直观，适合整体页面布局。
5. 综合示例
▶ 示例
▶ 试一试❓ 常见问题
Q grid-column: 1 / -1 是什么意思？
A 表示从第 1 条网格线跨越到最后 1 条网格线（-1 是最后一条线的编号），即占满整行。非常适合做全宽的标题行或分隔行，不需要知道总共有多少列。
Q Grid 项目可以重叠吗？
A 可以。Grid 允许项目占据相同的网格区域，后面的项目会覆盖在前面的上面。可以利用这个特性做叠加效果，比如文字叠在图片上。用 z-index 控制叠放顺序。
Q span 关键字怎么用？
A
grid-column: span 2 表示"跨 2 列"，比写网格线编号更直观。不需要知道从哪条线开始，浏览器会自动计算。特别适合在不知道具体列数的响应式场景中使用。📖 小节
- Grid 的项目放置非常灵活——你可以精确指定每个项目从哪条网格线开始、到哪条网格线结束，或者用
span关键字跨多行/多列 - 在单元格内部，
justify-items/align-items控制整体对齐，justify-self/align-self控制单个元素对齐 - 如果感觉线编号不好记，可以试试用
grid-template-areas给区域命名，更加直观
📝 作业
- 创建一个 4×4 网格，将一个项目放置在从第 2 列第 2 行开始、跨 2 列 2 行的位置。
- 使用
grid-template-areas创建一个完整的页面布局：头部（跨2列）、侧栏、内容区、底部（跨2列）。 - 在网格容器中让所有项目水平和垂直居中（使用
place-items: center）。 - 让网格中的第三个项目单独在单元格内靠右下角对齐（使用
justify-self和align-self）。
