justify-content控制网格容器在行轴方向的对齐，align-content控制块轴方向的对齐；二者仅在存在剩余空间且对应轴上有多轨道时生效，常见失效原因是轨道已填满容器尺寸。
justify-content 控制网格容器在行轴方向的对齐
当网格容器的总宽度小于其父容器（即存在剩余空间）时，justify-content 决定整行网格轨道（所有列轨道组成的整体）如何沿行轴（inline axis，通常是水平方向）分配这个剩余空间。
常见取值包括：start（左对齐）、center（居中）、end（右对齐）、space-between（首尾贴边，中间等距）、space-around（每个网格轨道两侧等距）、space-evenly（所有空白间隙相等）。
注意：它只在 grid-template-columns 显式定义了多列，且容器有足够宽余量时才生效；如果列用 1fr 填满全部宽度，通常看不到效果。
align-content 控制网格容器在块轴方向的对齐
align-content 的作用逻辑与 justify-content 对称，但它作用于块轴（block axis，通常是垂直方向），影响的是“所有行轨道组成的整体”在容器高度内的分布。
立即学习“前端免费学习笔记（深入）”；
它仅在以下两个条件同时满足时才起作用：
– 容器设置了明确高度（如 height: 400px 或 min-height）
– grid-template-rows 定义了多行，且所有行轨道加起来的高度小于容器高度
典型场景：一个固定高容器里放了 3 行 100px 的网格，容器高 500px，这时就有 200px 垂直剩余空间，align-content 才会生效。
为什么设了 justify-content 却没反应？
最常见原因是网格列本身已占满容器宽度，没有剩余空间可分配。排查要点：
-
grid-template-columns是否用了1fr、auto或百分比填满？这些会让列撑满，justify-content失效 - 容器是否设置了
width？若父容器未限宽，子网格可能按内容宽度渲染，导致无剩余空间 - 是否误用了
justify-items（控制单个网格项）或justify-self（控制某个项）？它们和justify-content作用对象完全不同 - 检查是否启用了
grid-auto-flow: column—— 此时行轴变成垂直方向，justify-content就控制垂直对齐了
align-content 在 Flexbox 里也有，但行为不同
虽然名字一样，但 align-content 在 Grid 和 Flexbox 中的触发条件和语义不同：
在 Flexbox 中，它只在 flex-wrap: wrap 且有多行时才生效；而在 Grid 中，只要有多行轨道 + 容器有高度余量就生效，和是否换行无关。
更关键的是：Grid 的 align-content 影响的是“行轨道组”的位置，而 Flexbox 的 align-content 影响的是“多行 flex item 组”的位置 —— 底层模型不同，不能凭经验直接迁移理解。
如果你发现垂直方向对齐不生效，优先确认容器是否有显式高度、行轨道是否未填满该高度，而不是怀疑属性写错了。
