align-content用于控制css Grid多行在垂直方向的对齐方式，仅在容器有多余空间且含多行时生效；常用值如center使各行居中，space-between实现首尾贴边、中间等距，stretch则拉伸填满容器，需配合固定高度或未占满空间的行轨道使用。
在使用 CSS Grid 布局时，align-content 是一个非常实用的属性，用于控制网格容器中网格行在交叉轴（垂直方向）上的对齐方式。它只在网格容器有多余空间且包含多行网格轨道时才生效。
align-content 的作用场景
当你的 grid 容器设置了固定高度，或者其内容不足以填满容器高度时，如果定义了多个行轨道（比如用 grid-template-rows 或 repeat()），而这些行没有占满整个容器，那么剩余的垂直空间可以通过 align-content 来分配。
这个属性适用于多行或多列网格容器的总体对齐，与 align-items（控制单个网格项在单元格内的对齐）不同。
常用的 align-content 取值及效果
以下是常见的取值及其表现：
立即学习“前端免费学习笔记（深入）”；
- start：所有行贴靠容器顶部对齐（默认值，部分情况下表现为 stretch）
- end：所有行贴靠容器底部对齐
- center：所有行在容器中垂直居中对齐
- space-between：行之间均匀分布，首行贴顶，末行贴底
- space-around：每行上下有相等的空间，两端空间为一半
- space-evenly：包括边缘在内的所有间隙都相等
- stretch：行自动拉伸以填满容器（前提是未设置固定高度）
实际应用示例
假设你有一个固定高度的 grid 容器，并定义了三行，但总高度小于容器高度：
.container {
display: grid;
height: 500px;
grid-template-rows: 100px 100px 100px;
align-content: center;
}
此时，这三行总共 300px 高，容器高 500px，多出的 200px 将在上下均匀分布，实现垂直居中对齐。
若将 align-content: space-between，则第一行顶对齐，最后一行底对齐，中间行等距分布。
注意事项
该属性仅在以下情况有效：
- 容器启用了 grid 布局（display: grid 或 display: inline-grid）
- 容器在交叉轴方向上有多余空间
- 存在多行网格轨道（单行无效）
- 不能与 grid-auto-rows 的某些固定行为冲突（如全部撑满）
基本上就这些。合理使用 align-content 能让 grid 布局在垂直方向更灵活地适应内容和空间变化，是实现整体对齐的重要工具。