justify-content 在 grid 容器中不起作用，是因为容器未设置 display: grid（或 inline-grid）；它控制整个网格在行内轴上的对齐，而 justify-items 控制单元格内容对齐，二者作用域不同。
justify-content 在 Grid 容器中不起作用？检查是否漏了 display: grid
很多人调了半天 justify-content，发现子元素纹丝不动，根本原因是容器压根没变成 Grid 格局。CSS Grid 的对齐属性只在 display 为 grid 或 inline-grid 的容器上生效。
- 必须显式设置
display: grid（或inline-grid），仅靠grid-template-columns等声明不自动触发 Grid 模式 - 如果用了
float、inline-block或 Flexbox 父级，justify-content会完全被忽略 - 用浏览器开发者工具检查 computed styles，确认
display确实是grid
justify-content 和 justify-items 容易混淆：一个管轨道，一个管单元格内容
justify-content 控制的是整个网格（grid container）在**行内轴（inline axis）上的对齐**，也就是所有轨道组成的“大盒子”如何在父容器中摆放；而 justify-items 控制的是每个网格项（grid item）自身内容在单元格内的对齐方式。
-
justify-content: center→ 整个网格左右居中（比如 3 列宽共 600px，父容器 1200px，网格整体居中） -
justify-items: center→ 每个格子里的文本/图片在各自格子内水平居中 - 两者可同时存在，互不干扰；但初学者常误以为设了
justify-items就能控制网格整体位置
justify-content 取值差异：start/end 不等于 left/right，尤其在 RTL 布局下
justify-content 的 start 和 end 是逻辑值，依赖容器的 writing-mode 和 direction；而 left/right 是物理值，在 Grid 中已被废弃（部分浏览器不支持）。
- 默认
direction: ltr时，start≈left，end≈right - 若页面启用了
direction: rtl，start实际指向右侧，end指向左侧 —— 这时用left反而会出错或被忽略 - 推荐始终使用
start/end/center/stretch/space-between等标准值，避免硬写left
space-around 和 space-evenly 的间隙计算逻辑不同，别凭感觉猜
当用 justify-content: space-around 或 space-evenly 时，浏览器分配空白的方式完全不同，尤其在列数少、容器宽裕时差异明显。
-
space-around：首尾项外侧留空 = 项间空隙的一半；相当于每项“自带半倍边距” -
space-evenly：所有空隙（包括最左、最右）完全相等；5 项就有 6 段等距空白 - 例如 3 列网格 +
space-around：左边空隙 = 右边空隙 = 中间两空隙的一半；而space-evenly下四段空隙全等 - 注意：IE 不支持
space-evenly，需降级为space-around或用gap+justify-content: center模拟
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
