justify-content控制网格轨道整体在容器主轴（水平）方向的对齐，仅当grid-template-columns总宽小于容器宽时生效；justify-items才控制单个网格项在其单元格内的水平对齐。
justify-content 控制网格轨道整体在容器内的水平位置
它不碰单个网格项，只管“列这一整排”怎么摆。当 grid-template-columns 定义的总宽度小于容器宽度时，这个属性才生效。比如三列共 300px，容器宽 800px，justify-content: center 就会让这三列作为一个整体水平居中。
常见错误是以为它能控制文字或图片在格子内居中——不能。它影响的是轨道（列）在容器主轴（行内轴）上的分布，和格子内部内容完全无关。
- 只对 Grid 容器生效，也适用于 Flex 容器
- 取值如
start、center、space-between等，语义和 Flex 中一致 - 若容器宽度刚好等于所有列宽之和，该属性无视觉效果
justify-items 控制每个网格项在其单元格内的水平对齐
这才是真正让格子里的文字、按钮、图标水平居中的属性。它作用于每个 grid-item 的内容框（content box），默认值是 stretch，所以没设宽高的子元素会横向拉满整个单元格。
容易踩的坑：在 Flex 布局里写 justify-items: center 完全无效，浏览器直接忽略——它只属于 Grid。
- 仅适用于 Grid 容器，Flex 中无对应能力
- 可被单个项的
justify-self覆盖，比如某个卡片需要左对齐而其他都居中 - 对齐基准是单元格的内联轴（inline axis），在 LTR 语言中就是从左到右方向
两者同时存在时，谁管哪一层？
可以想象成两层画布：外层是网格轨道（列和行构成的骨架），justify-content 在这层上移动整个骨架；内层是每个格子内部，justify-items 在每个格子的小画布上摆放内容。
典型误用场景：想让一个 div 在网格中水平居中，却只设了 justify-content: center，结果整列居中了，但格子里的文字还是靠左——漏掉了 justify-items 或 justify-self。
- 如果网格只有一列且容器宽度匹配，
justify-content不起作用，此时必须靠justify-items -
justify-items对空单元格无效（没有内容可对齐），但依然会应用到该格子上 - 书写模式（如 RTL 或 vertical-rl）会改变
start/end的实际方向，但center始终可靠
align-items 和 justify-items 是一对搭档，不是替代关系
justify-items 管水平（行内轴），align-items 管垂直（块轴）。它们分工明确，常一起设置：justify-items: center; align-items: center 才能实现真正的单元格内居中。
别指望 justify-content 配 align-items 能搞定格子内对齐——前者不管格子，后者只管垂直。缺了 justify-items，水平那层就悬空了。
-
align-items在 Grid 和 Flex 中都有效，但justify-items是 Grid 独占 - 如果某网格项设置了
width或max-width，justify-items: stretch就不会拉伸它 - 使用
justify-self: center时，注意它不继承父级justify-content，只覆盖justify-items
justify-items: center 对它有效，但若内容本身是 inline 元素且父容器没触发 BFC，可能仍表现异常。这种细节不在属性定义里，但在真实项目中高频出现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
