align-items 和 justify-items 分别控制网格项在列轴和行轴的对齐方式，前者处理垂直对齐，后者处理水平对齐；常用值包括 start、end、center 和 stretch，默认为 stretch；通过同时设置 align-items: center 和 justify-items: center 可实现网格内容在单元格内完全居中；两者作用于网格容器，影响所有子项，若需单独控制可用 align-self 或 justify-self 覆盖；适用于表格类布局，如数据面板或卡片网格，能统一对齐样式，提升整体美观性。
CSS Grid 布局中，align-items 和 justify-items 是控制网格区域内子元素对齐方式的关键属性。它们分别处理交叉轴（列方向）和主轴（行方向）的对齐，配合使用可以精确控制表格内容的位置。
align-items：控制垂直对齐（沿列轴）
该属性作用于网格容器，定义所有网格项在单元格内的垂直对齐方式。
常用取值包括：- start：顶部对齐
- end：底部对齐
- center：居中对齐
- stretch：拉伸填满整个单元格（默认值）
例如，让所有单元格内容垂直居中：
grid-container {
align-items: center;
}justify-items：控制水平对齐（沿行轴）
该属性定义网格项在单元格内的水平对齐方式。
立即学习“前端免费学习笔记（深入）”；
常见取值有：- start：左对齐
- end：右对齐
- center：水平居中
- stretch：横向拉伸（默认）
设置所有内容水平居中：
grid-container {
justify-items: center;
}两者结合：实现单元格内完全居中
当需要表格中的内容在每个格子中都居中显示时，同时设置两个属性即可：
grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center; /* 垂直居中 */
justify-items: center; /* 水平居中 */
}此时，所有直接子元素都会在其对应的网格区域中居中对齐。
注意点与适用场景
这两个属性适用于网格容器，影响所有子项。如果某个子项需要单独控制，可使用 align-self 或 justify-self 覆盖全局设置。
在类似表格的布局中，比如数据展示面板或卡片网格，使用 align-items 和 justify-items 能快速统一内容对齐风格，避免为每个项目单独设置样式。
基本上就这些，合理搭配能让网格布局更整洁美观。
