如何用css grid与align-content实现多行对齐

使用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 值及其表现：

立即学习“前端免费学习笔记（深入）”；

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

• 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 调整行的整体排布。

以上就是如何用css grid与align-content实现多行对齐的详细内容，更多请关注php中文网其它相关文章！