通过设置 justify-items 和 align-items 可解决CSS网格子元素对齐问题，前者控制水平对齐，后者控制垂直对齐，常用值有 start、end、center 和 stretch，默认为 stretch；需确保父容器设置了 display: grid 才生效；若需单独调整某个子元素，可使用 justify-self 或 align-self 覆盖全局设置。
当CSS网格布局中的子元素对齐不准时，通常是因为没有正确设置网格容器的对齐方式。通过使用 justify-items 和 align-items 属性，可以精确控制子元素在网格单元格内的水平和垂直对齐。
理解 justify-items 和 align-items 的作用
justify-items 控制子元素在网格单元格内的水平对齐（沿行轴方向），而 align-items 控制垂直对齐（沿列轴方向）。
常见取值包括：- start：对齐到起始边
- end：对齐到结束边
- center：居中对齐
- stretch：拉伸以填满整个单元格（默认值）
在网格容器上设置对齐方式
确保你在定义网格的父元素（即网格容器）上应用这两个属性。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
这样，所有直接子元素都会在各自的网格单元格中居中显示。
立即学习“前端免费学习笔记（深入）”；
针对个别子元素调整对齐
如果只想调整某个子元素，可以使用 justify-self 或 align-self 覆盖容器的统一设置。
例如：
.item-special {
justify-self: start;
align-self: end;
}
这个特定子元素将左对齐、底部对齐，不受容器 justify-items 或 align-items 影响。
检查是否遗漏 display: grid
确保父容器设置了 display: grid，否则 justify-items 和 align-items 不会生效。这一点容易被忽略，尤其是从 Flexbox 切换过来时。
基本上就这些。只要确认容器是网格布局，并正确设置对齐属性，子元素的位置问题大多能解决。不复杂但容易忽略细节。
