grid子元素对不齐主因是未显式控制对齐行为；需确认父容器display为grid、子项为直接子元素，并合理使用justify-items/align-items或justify-self/align-self，避免margin:auto等干扰。
Grid 布局中子元素对不齐，通常不是网格本身有问题，而是默认的对齐行为没被显式控制。justify-items 和 align-items 是作用于整个网格容器的属性，它们统一控制所有直接子项（grid item）在行内轴（水平）和块轴（垂直）上的对齐方式。
确认你用的是 grid 容器，不是 flex 或普通块级元素
这两个属性只在 display: grid 或 display: inline-grid 的父容器上生效。如果父元素是 flex、block 或未设 display，设置 justify-items/align-items 无效。
- 检查开发者工具中父元素的 computed display 是否为 grid
- 确保子元素是该 grid 容器的**直接子元素**（嵌套一层以上的不会被这两个属性影响）
理解 justify-items 和 align-items 的取值与方向
justify-items 控制**行内轴（inline axis）对齐**，即 Grid 中每列内部的水平对齐（从左到右）；align-items 控制**块轴（block axis）对齐**，即每行内部的垂直对齐（从上到下）。
- 常用值：start / end / center / stretch（默认值）
- stretch 是默认行为——子元素会拉伸填满所在网格区域，若子元素有固定宽高或 max-width/max-height，可能看起来“没对齐”，其实是被限制了拉伸
- 想让所有子项水平居中？写 justify-items: center
- 想让所有子项顶部对齐？写 align-items: start
单个子项需要特殊对齐？用 justify-self / align-self
如果只是某个 item 要单独调整，不要改容器级的 justify-items/align-items，而应在该子项上设置：
立即学习“前端免费学习笔记（深入）”；
- justify-self: center（覆盖 justify-items）
- align-self: end（覆盖 align-items）
- 也可同时写：justify-self: center; align-self: center 实现单个元素居中
对齐失效的常见干扰因素
即使属性写对了，也可能因其他样式“压住”对齐效果：
- 子元素设置了 margin: auto —— 在 Grid 中，auto margin 会抢占对齐逻辑，优先按 margin 行为布局
- 子元素有固定尺寸 + overflow 或 min-width/min-height，导致 stretch 失效
- 使用了 place-items（是 justify-items + align-items 的简写），它会覆盖分开写的两个属性，注意 CSS 优先级顺序
