对齐方式 - align & justify
Grid 提供强大的对齐控制：容器对齐和项目对齐
📊 对齐属性速查表
| 属性 | 作用对象 | 方向 | 说明 |
|---|---|---|---|
justify-content |
整个网格 | 水平（行轴） | 网格在容器中的水平位置 |
align-content |
整个网格 | 垂直（列轴） | 网格在容器中的垂直位置 |
justify-items |
所有项目 | 水平（行轴） | 项目在单元格中的水平位置 |
align-items |
所有项目 | 垂直（列轴） | 项目在单元格中的垂直位置 |
一、容器级对齐：justify-content（水平）
控制整个网格在容器中的水平位置
start（默认，左对齐）
1
2
3
center（水平居中）
1
2
3
end（右对齐）
1
2
3
space-between（两端对齐）
1
2
3
space-around（周围留白）
1
2
3
space-evenly（均匀分布）
1
2
3
二、容器级对齐：align-content（垂直）
控制整个网格在容器中的垂直位置
start（顶部对齐）
1
2
3
center（垂直居中）
1
2
3
end（底部对齐）
1
2
3
三、组合使用：完美居中
1
2
3
💡 提示：可以使用简写属性
place-content: center center 同时设置水平和垂直居中
四、项目级对齐：justify-items & align-items
控制每个项目在其网格单元格中的位置
justify-items: start（项目左对齐）
1
2
3
4
5
6
justify-items: center（项目水平居中）
1
2
3
4
5
6
align-items: center（项目垂直居中）
1
2
3
4
5
6
justify-items: stretch（默认，拉伸填充）
1
2
3
4
5
6
常用对齐组合：
/* 整个网格居中 */
.grid {
justify-content: center;
align-content: center;
/* 简写：place-content: center; */
}
/* 项目在单元格中居中 */
.grid {
justify-items: center;
align-items: center;
/* 简写：place-items: center; */
}
/* 单个项目自定义对齐 */
.item {
justify-self: end;
align-self: start;
/* 简写：place-self: start end; */
}
/* 整个网格居中 */
.grid {
justify-content: center;
align-content: center;
/* 简写：place-content: center; */
}
/* 项目在单元格中居中 */
.grid {
justify-items: center;
align-items: center;
/* 简写：place-items: center; */
}
/* 单个项目自定义对齐 */
.item {
justify-self: end;
align-self: start;
/* 简写：place-self: start end; */
}