使用CSS Grid的align-content实现多行对齐，需设置固定高度容器并启用多行布局。1. 定义display: grid、grid-auto-rows和固定height，确保内容换行；2. 应用align-content控制多行在交叉轴的分布：start（顶部）、end（底部）、center（居中）、space-between（首尾贴边）、space-around（周围等距）、space-evenly（完全等距）；3. 适用于卡片网格等场景，当项目不足或超出时保持整齐垂直排布。
使用 CSS Grid 和 align-content 实现多行对齐，关键在于容器设置了多行网格布局，并且整体内容高度超出容器时，通过 align-content 控制这些行在交叉轴（通常是垂直方向）上的分布方式。
1. 基础 Grid 容器设置
要启用多行对齐，先定义一个 grid 容器，并允许项目换行。使用 grid-auto-rows 设置每行高度，用 grid-auto-flow: row（默认）让项目按行排列。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列 */
grid-auto-rows: 100px; /* 每行高度固定 */
grid-auto-flow: row;
height: 400px; /* 容器高度固定，才能看到 align-content 效果 */
align-content: center; /* 控制多行整体对齐方式 */
}
注意：align-content 只在 grid 容器有**多余空间**且**有多行内容**时才起作用。如果只有一行或容器高度自适应（如 height: auto），这个属性不会生效。
2. align-content 的常用取值与效果
以下是常用的 align-content 值及其表现：
立即学习“前端免费学习笔记（深入）”；
- start：多行向容器顶部对齐
- end：多行向底部对齐
- center：多行整体居中对齐
- space-between：行之间均匀分布，首行贴顶，末行贴底
- space-around：每行周围分配均匀空间
- space-evenly：所有行间距及边缘间距完全相等
/* 示例：多行居中 */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 80px;
height: 300px;
align-content: center;
}
3. 实际应用场景
比如做一个卡片网格，卡片数量不固定，希望在容器中垂直居中排列多行：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 100px;
gap: 10px;
height: 500px;
align-content: center; /* 多余的垂直空间均匀分布在上下 */
padding: 20px;
box-sizing: border-box;
}
当卡片超过一行时，整个行块会垂直居中；若不足填满容器，也能保持整齐对齐。
基本上就这些。关键是设置固定高度容器、允许多行生成、再用 align-content 调整行的整体排布。
