justify-items 控制 grid 项目在行内（水平）方向的对齐，align-items 控制块内（垂直）方向的对齐，二者均作用于直接子元素在各自单元格内的定位，不干预项目内部布局。
justify-items 和 align-items 的作用范围搞错了
justify-items 控制的是 grid 项目在**行内（inline）方向**（通常是水平方向）的对齐，align-items 控制的是**块内（block）方向**（通常是垂直方向）的对齐。但很多人误以为它们影响单个项目的内部内容，其实它们只作用于**所有直接子元素（grid items）在各自网格单元格内的对齐方式**——前提是这些项目没有设置 justify-self 或 align-self 覆盖。
常见错误现象：
• 设置了 justify-items: center，但某些项目还是靠左
• 网格容器有 align-items: stretch（默认值），但部分项目高度不一致
- 检查是否某个 grid item 显式设置了
justify-self: start或align-self: flex-start，它会覆盖容器级设置 - 确认项目是否设置了固定宽高或
min-width/min-height，这会影响stretch行为 -
align-items: stretch对已设置height、max-height或position: absolute的项目无效
不同对齐值在 grid 单元格中的实际表现
justify-items 和 align-items 的取值（如 start、center、end、stretch）行为依赖于网格轨道尺寸和项目自身尺寸。尤其要注意 stretch 是默认值，但它不是“居中”，而是“拉伸填满”——只有当项目在对应方向上未设置尺寸时才生效。
-
justify-items: stretch：项目宽度会拉伸到所在列宽（除非设置了width、min-width或max-width） -
align-items: center：项目在行高范围内垂直居中，但不会改变其自身高度；若行高由内容撑开，则居中基准是该行的实际高度 -
justify-items: center对display: inline-block或浮动元素无效，需确保项目是标准 grid item（即父容器为display: grid）
为什么有些项目就是不听 align-items？
最常被忽略的原因是：grid 项目内部用了 display: flex 或 display: block 且设置了 height，导致 align-items 失效。因为 align-items 只控制项目在单元格内的**定位位置**，不控制其内部布局。
立即学习“前端免费学习笔记（深入）”；
- 如果想让项目内部文字垂直居中，不要依赖
align-items，而应在项目自身加display: flex; align-items: center; justify-content: center - 若项目是图片，
align-items: center会让整个<img alt="css grid项目间对齐不一致怎么办_使用justify-items和align-items调整" >在单元格中垂直居中，但图片本身可能因vertical-align或默认基线对齐看起来偏下 - 使用
place-items: center是justify-items: center; align-items: center的简写，但同样受上述限制
调试建议：快速定位对齐异常根源
打开浏览器开发者工具，选中 grid 容器，开启“Layout”面板（Chrome/Firefox 均支持），勾选“Show grid line numbers”和“Show area names”。再逐个点击 grid item，观察右侧 computed 样式中 justify-self 和 align-self 的最终计算值——它会明确告诉你当前生效的是容器继承值，还是被局部覆盖了。
- 在容器上临时加
outline: 1px solid red，看项目是否真的超出单元格边界 - 给所有 grid item 加
background: rgba(0,0,0,0.1)，直观判断它们是否真正居中/拉伸 - 避免在 grid item 上同时用
margin: auto和align-items: center，两者逻辑冲突，优先级取决于 display 类型
grid 对齐真正难的不是语法，而是分清「容器对齐」、「项目自身尺寸」、「项目内部布局」三层关系。一旦某一层被显式声明，就很可能打断你预期的级联效果。
