justify-content控制水平方向网格轨道对齐，align-content控制垂直方向网格轨道对齐，两者均在容器有剩余空间时生效。
在 CSS Grid 布局中，justify-content 和 align-content 都用于控制网格容器内网格轨道（grid tracks）的对齐方式，但它们作用的方向不同，适用的前提也有区别。
justify-content：控制列轴方向上的对齐（水平方向）
justify-content 用于在 行轴（inline axis） 上对齐整个网格轨道，也就是沿着 列的方向 分配多余空间。它影响的是网格容器在 水平方向 上如何对齐其内容。
常见取值包括：- start - 左对齐（默认）
- end - 右对齐
- center - 居中对齐
- space-between - 两端对齐，中间间距相等
- space-around - 每个项目周围有相等空间
- space-evenly - 所有项目之间的间距完全相等
这个属性起作用的前提是：网格容器在行轴方向上有 多余空间，即所有列轨道的总宽度小于容器宽度。
align-content：控制行轴方向上的对齐（垂直方向）
align-content 用于在 块轴（block axis） 上对齐网格轨道，也就是沿着 行的方向 分配多余空间。它影响的是网格容器在 垂直方向 上的对齐方式。
立即学习“前端免费学习笔记（深入）”；
常见取值与 justify-content 类似：
- start, end, center
- space-between, space-around, space-evenly
这个属性生效的前提是：网格容器在块轴方向存在 多余高度，即所有行轨道的总高度小于容器高度。
关键区别总结
- justify-content 控制列之间的水平分布（横轴）
- align-content 控制行之间的垂直分布（纵轴）
- 两者都只在网格容器有剩余空间时才起作用
- 它们作用于整个网格轨道的排列，而不是单个网格项的对齐
注意：如果网格容器的行或列使用 fr 单位填满可用空间，通常不会有剩余空间，此时 align-content 或 justify-content 就不会产生效果。
基本上就这些。理解这两个属性的关键是分清“行”和“列”对应的方向，以及“网格轨道整体”与“单个网格项”的区别。
