justify-items 控制网格项在列方向上于各自单元格内的水平对齐，align-items 控制行方向上的垂直对齐；二者均不控制网格轨道分布或容器整体位置，且可被 justify-self/align-self 单独覆盖。
justify-items 控制的是网格项在列方向上的对齐
它影响的是每个 grid-item 在其所在**网格单元格（grid cell）内部**的水平对齐方式，只对直接子元素生效，不是整个网格容器的“整体居中”。常见误解是把它当 justify-content 用——后者管的是整个网格轨道（tracks）在容器里的分布。
-
justify-items: start：所有子项靠左贴齐单元格左边缘（默认值） -
justify-items: center：子项水平居中于各自单元格内（不是整个网格居中） -
justify-items: stretch：子项拉伸填满单元格宽度（最常用，也是默认行为，除非子项有固定宽） - 若子项设置了
width或max-width，stretch就不会生效；此时center才真正起作用
align-items 控制的是网格项在行方向上的对齐
和 justify-items 是垂直镜像关系：它决定每个子项在其单元格内的**垂直对齐位置**。同样不控制行轨道间距，也不影响容器外边距。
-
align-items: start：贴单元格顶部（默认） -
align-items: center：垂直居中于单元格内 -
align-items: end：贴底部 -
align-items: stretch：拉伸填满单元格高度（前提是子项没设height或max-height） - 注意：如果网格容器本身高度未定义（比如靠内容撑开），
stretch可能看起来没效果——因为单元格高度就是内容高度
justify-items 和 align-items 不会覆盖单个子项的 justify-self / align-self
这两个全局属性是“默认值”，一旦某个子项显式设置了 justify-self 或 align-self，就会以该子项的设置为准。这是层叠逻辑，不是覆盖。
- 例如容器设了
justify-items: center，但某个grid-item写了justify-self: start，那它就靠左，其余仍居中 -
justify-self和align-self的可选值和全局属性完全一致，且支持unset回退到全局值 - 不要试图用
justify-items强制统一所有子项对齐——如果有例外项，优先用justify-self单独调，更可控
浏览器兼容性与 display: contents 的干扰
这两个属性在现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+）都稳定支持，但有个隐蔽坑：display: contents 会让子元素“脱离文档流但保留样式”，此时 justify-items 和 align-items 对它**完全失效**——因为该元素已不算网格项了。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误用了
display: contents在网格直接子元素上 - 如果只是想隐藏容器盒但保留子项参与网格布局，用
visibility: hidden+grid-column/grid-row显式定位更安全 - Flexbox 中没有对应
justify-items的全局属性，别拿 flex 的justify-content类比理解
stretch 行为；还有就是把 justify-items 当成让整个网格居中的开关——它只管“格子里怎么放”，不管“格子本身在哪”。 
