justify-content 控制网格容器行方向整行轨道的对齐，仅在 display: grid 且容器宽度大于内容总宽时生效；align-content 控制列方向多行轨道的整体对齐，仅在多行且容器高度大于行高总和时有效；二者均作用于轨道块，而非单个网格项。
justify-content 控制的是网格容器在行方向上的整体对齐
它只在网格容器的 display: grid 且设置了明确宽度（比如 width 或 max-width）但内容总宽小于容器时才生效。换句话说，justify-content 对齐的是「整行网格轨道」，不是单个格子。
常见取值和效果：
-
justify-content: start：所有列轨道靠左贴齐（默认） -
justify-content: center：整行网格居中，左右留白相等 -
justify-content: space-between：首尾列轨道贴边，中间空隙均分 -
justify-content: space-evenly：所有相邻轨道间距（含边缘）完全相等
注意：justify-content 在 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) 这类响应式写法中常被忽略——因为自动列会撑满容器，没剩余空间可“对齐”。想让它起作用，得加 width 或用 inline-grid。
align-content 控制的是网格容器在列方向上的整体对齐
和 justify-content 是镜像关系，但它只在多行网格（即有多个 grid-row 轨道）且容器高度大于所有行高之和时才有效。单行网格设了也没反应。
立即学习“前端免费学习笔记（深入）”；
典型触发场景：
- 用了
grid-template-rows: repeat(3, 100px)，但容器height: 400px - 用了
grid-auto-rows: 80px且内容生成了多行，但容器设了固定高度
这时 align-content: center 会让三行轨道在容器内垂直居中，上下留白；align-content: space-around 则让行间+上下空隙均分。如果容器高度刚好等于所有行高之和，align-content 完全无效。
别把 justify-content / align-content 和 justify-items / align-items 搞混
这是最常踩的坑：justify-content 和 align-content 管的是「轨道块」的整体分布；而 justify-items 和 align-items 管的是「每个网格项」在其所在单元格内的对齐方式。
例如：
-
justify-items: center→ 每个格子里的内容水平居中 -
align-items: stretch→ 默认行为，格子内容拉伸填满单元格高度 -
justify-content: center→ 整个网格（所有列轨道）在容器里水平居中
两者可以共存，互不干扰。但新手常误以为设了 justify-content: center 就能让某个 div 居中，结果发现没变化——大概率是因为那个 div 所在的列轨道已经占满容器宽度，没空间可居中。
实际布局中更常用 justify-self / align-self 针对单个元素微调
当只需要某个格子内容偏移，而不是全局调整时，直接在该网格项上设 justify-self 或 align-self 更精准，也更轻量。
比如：
article {
justify-self: end;
align-self: center;
}
这会让 article 在其单元格内右对齐、垂直居中，不影响其他格子。相比改 justify-items 全局设置，它更可控，也避免意外影响其他项。
要注意的是：justify-self 在 flex 布局里不存在，是 grid 特有属性；而且它只对直系网格子项生效，嵌套的 flex 容器内部再设这个属性就无效了。
