justify-items 控制网格项的水平对齐
justify-items 决定所有网格项在列轴（inline axis）方向上如何对齐，也就是每格内部内容的水平位置。它作用于整个网格容器，不是单个项。
常见错误是以为它能控制某一行或某一列的对齐——其实不能，它统一影响所有未显式设置 justify-self 的项。
- 默认值是
stretch：网格项会拉满整列宽度（除非设置了固定宽或max-width） - 设为
start时，内容贴左；end贴右；center居中 - 如果网格项本身有
width: fit-content或内联元素（如文字、img），justify-items: center才会真正居中显示，否则仍可能被stretch覆盖
grid-container {
display: grid;
justify-items: center; /* 所有格子内的内容水平居中 */
}align-items 控制网格项的垂直对齐
align-items 对应的是行轴（block axis）方向，也就是每格内部内容的垂直位置。和 justify-items 是正交关系，常一起用。
容易踩的坑：当网格项是块级元素（比如 div）且没设高度时，align-items: center 看不出效果——因为它的“容器高度”就是内容高度，没多余空间可居中。
立即学习“前端免费学习笔记（深入）”；
- 只有当网格轨道（即
grid-template-rows定义的行高）明确大于项内容高度时，align-items才生效 -
stretch仍是默认值，会让项填满整行高度；start/end/center表现类似水平方向
grid-container {
grid-template-rows: 100px 100px;
align-items: center; /* 每格里内容垂直居中，前提是行高 > 内容高 */
}justify-items 和 align-items 不影响网格线位置
这两个属性只调整网格项自身在单元格内的对齐方式，不会移动网格线、不改变 grid-template-columns 或 grid-template-rows 的定义，也不影响 gap。
有人误以为设了 justify-items: end 就能让整列右移——不会。它只是让每个格子里的内容靠右，格子本身位置不变。
- 若想整体偏移整列，该用
justify-content（容器级，对齐整个网格） - 若想单个项偏移，优先用
justify-self/align-self，它们会覆盖justify-items/align-items
浏览器兼容性与 flexbox 混用风险
justify-items 和 align-items 在现代浏览器中支持良好（Chrome 57+、Firefox 52+、Safari 10.1+），但 IE 完全不支持。
更隐蔽的问题是：如果父容器同时用了 display: flex 和 display: grid（比如通过 JS 切换），某些旧版 Safari 会忽略 align-items，或把 stretch 解释为最小高度 0。
- 不要依赖
align-items: stretch来撑开无内容的空格；显式设min-height更可靠 - 在 CSS 预处理器里避免嵌套出
grid+flex同存的规则，容易触发渲染异常
对齐逻辑本身不复杂，难的是判断当前项到底有没有“可对齐的空间”——得看它所在的网格轨道尺寸、自身尺寸、是否设置了 overflow 或 box-sizing。这些细节不报错，但结果常常和预期差一点。
