Grid子元素对齐不一致主因是justify-items/align-items作用于各单元格内而非整体容器，需确保父容器定义显式轨道、检查子项是否覆盖了对齐属性、处理跨行跨列情况及排除内部样式干扰。
Grid 布局中子元素对齐不一致，通常不是“bug”，而是 justify-items 和 align-items 的作用范围与你预期不符。它们控制的是**所有直接子项在各自网格单元（grid cell）内的对齐方式**，而不是整个容器的对齐。若子项跨越多行/列、设置了自身 justify-self/align-self，或父容器未定义明确的轨道尺寸，就容易出现视觉上“对不齐”的现象。
确认父容器的 grid 容器属性是否完整
Grid 对齐生效的前提是：父元素已声明 display: grid，且至少定义了行/列轨道（如 grid-template-rows 或 grid-template-columns）。如果只写 display: grid 没有轨道，浏览器会按内容自动生成单行单列隐式网格，此时 justify-items 仍有效，但所有子项挤在同一个格子里，看起来像“乱排”。
- ✅ 推荐写法：
grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; - ❌ 避免仅用：
display: grid;（无显式轨道） - 注意：
justify-items默认值是stretch，会让子项拉满单元格宽度；align-items默认也是stretch，拉满高度——若单元格本身高度由内容撑开，就看不出垂直居中效果。
区分 justify-items / align-items 和 justify-self / align-self
justify-items 和 align-items 是**容器级设置**，统一影响所有直系子项在各自单元格内的内边距对齐（主轴/交叉轴）。而每个子项可单独用 justify-self 或 align-self 覆盖该行为。一旦某个子项写了 align-self: flex-start，它就会脱离容器的 align-items 控制。
- 检查子元素是否意外设置了
justify-self或align-self（包括通过类名、重置样式、框架默认样式带入） - 想强制统一：可在子项上显式重置：
justify-self: normal; align-self: normal;（normal表示继承容器的justify-items/align-items） - 常见陷阱：CSS 框架（如 Tailwind）的
self-start类会注入align-self: flex-start，覆盖父级设置
处理跨行/跨列子项的对齐偏差
当某个子项使用 grid-column: 1 / -1 或 grid-row: span 2 时，它占据多个单元格，但 justify-items/align-items 依然只在它所占的“合并区域”内起作用——这个区域的宽高由网格线决定，未必和其它单格子项的单元格尺寸一致，导致视觉错位。
立即学习“前端免费学习笔记（深入）”；
- 解决思路：让跨格子项也“对齐到同一参考线”。例如用
place-self: center;显式居中，而非依赖容器级属性 - 更稳妥做法：避免混用单格与大跨度子项；或统一用
place-items: center;（等价于justify-items: center; align-items: center;），再针对特殊子项微调 - 补充技巧：用
margin: auto;在 Grid 中也能实现单个子项在单元格内居中（主轴+交叉轴），且优先级高于justify-self/align-self
验证浏览器渲染与盒模型是否干扰
有时对齐“失效”其实是子元素内部内容（如文字、图片、按钮）的默认基线、行高、内边距或外边距造成的视觉误差，而非 Grid 对齐本身问题。
- 打开开发者工具，选中子元素 → 查看“Computed”面板，确认
justify-self和align-self计算值是否为你期望的（如center） - 临时加
outline: 1px solid red;到子项，看清它的实际边界是否真的居中 - 文字不对齐？可能是
line-height或vertical-align干扰，Grid 中推荐用display: flex; align-items: center;包裹文字容器，或设line-height: 1;+height: 100%;
