align-content 控制网格轨道在交叉轴的对齐，justify-content 控制主轴方向的对齐，两者共同决定网格容器内轨道的整体分布方式。
在使用 CSS Grid 布局时，align-content 和 justify-content 是两个重要的对齐属性，用于控制网格容器中整个网格轨道（grid tracks）在交叉轴和主轴方向上的对齐方式。它们作用于网格容器（grid container），而不是单个网格项。
align-content：控制网格行在交叉轴上的对齐
该属性定义了网格轨道（行或列）在交叉轴（cross axis）上如何分布剩余空间。当网格容器在交叉轴方向上有额外空间时，align-content 决定这些轨道整体如何排列。
常见取值包括：
- start：轨道向交叉轴起点对齐
- end：轨道向交叉轴终点对齐
- center：轨道在交叉轴居中对齐
- stretch：轨道拉伸以填满容器（默认值）
- space-between：两端对齐，中间均匀分配空白
- space-around：每个轨道周围分配相等的空白
- space-evenly：所有间隙完全相等
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr 1fr;
align-content: center; /* 整个网格块在垂直方向居中 */
height: 500px;
}
justify-content：控制网格列在主轴上的对齐
该属性控制网格轨道在主轴（main axis）方向上的对齐方式。当网格容器在主轴方向有额外空间时，justify-content 决定轨道整体如何分布。
常用值与 align-content 类似：
- start、end、center
- stretch（不常用于 justify-content）
- space-between、space-around、space-evenly
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 100px 100px;
justify-content: space-between; /* 两列之间平均分配空白 */
width: 400px;
}
实际应用场景
这两个属性通常配合使用，实现网格内容的整体居中、边缘对齐或间距分布。比如：
- 在一个固定宽高的容器中，让网格内容区域整体居中显示
- 创建响应式布局时，调整多行/多列之间的间距
- 避免网格项被压缩或拉伸，保持视觉平衡
注意：align-content 和 justify-content 只在网格容器有多余空间且定义了明确尺寸（如固定高度/宽度）时才生效。如果容器尺寸刚好匹配内容，则看不出效果。
基本上就这些。理解主轴与交叉轴的关系，结合具体布局需求选择合适的对齐方式，能更灵活地控制 Grid 布局的整体外观。
