justify-content 控制网格容器在主轴方向的对齐，仅当容器存在剩余空间时生效；有效值包括 start、end、center、stretch、space-around、space-between、space-evenly，各自按不同逻辑分配空隙。
justify-content 在 grid 布局中到底管什么
justify-content 控制的是整个网格容器（grid container）在主轴（main axis）方向上的对齐方式，不是单个网格项（grid item）的对齐。它只在容器的总尺寸大于所有行/列内容总和时才生效——换句话说，只有存在“剩余空间”时，justify-content 才有表现机会。
常见误解是以为它能微调某个 grid-item 的水平位置，其实不能；那是 justify-self 或 justify-items 的事。
哪些值有效？各自触发什么行为
可用值包括：start、end、center、stretch（默认）、space-around、space-between、space-evenly。关键区别在于“空隙分配逻辑”：
-
space-between：首项贴左、末项贴右，中间空隙均分（项数减一等份） -
space-around：每项两侧空隙相等，因此首尾项外侧空隙只有中间空隙的一半 -
space-evenly：所有相邻边缘（含容器边界）之间空隙完全相等 -
stretch：默认行为，但仅当网格轨道（track）未设固定尺寸时，才可能拉伸项来填满；若所有列宽都写死（如100px 100px），stretch就没效果
为什么加了 justify-content 没反应？几个典型原因
这是最常卡住人的点。根本原因几乎总是：容器没“多余空间”可分配。
立即学习“前端免费学习笔记（深入）”；
- 容器宽度被子项撑开（比如所有列用
max-content或内容过长），此时justify-content完全不触发 - 用了
display: inline-grid且父容器宽度不足，导致 grid 容器本身被压缩到刚好容纳内容 - 设置了
grid-template-columns: 1fr 1fr但容器宽度小于两项最小宽度之和，浏览器会收缩轨道而非留空——justify-content无处下手 - 忘了主轴方向：CSS Grid 中主轴由
grid-auto-flow决定，默认是row（横向），所以justify-content影响的是水平分布；若改成column，它就变成控制垂直分布
和 gap、margin 混用时要注意什么
gap 是网格项之间的固定间距，和 justify-content 的“外部空隙分配”互不干扰，可以同时存在。但容易踩坑的是 margin：
- 给网格项设
margin: auto可能覆盖justify-content效果（尤其在单个项目时） -
justify-content: center+ 某项设margin-left: auto，会导致该项被挤到最右，而非居中 - 不要试图用
gap替代justify-content实现首尾留白——gap不作用于容器边缘
真正需要首尾留白又保持项等距，优先选 space-evenly；若需首尾空隙更大，得靠容器 padding 配合 space-between。
主轴分布这件事，表面是调一个属性，实际牵扯轨道尺寸、容器约束、流方向三者博弈。值设对了却没效果，八成是轨道或容器尺寸没放开。
