css grid布局自动对齐align-content应用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-22

浏览次数：次

align-content用于控制CSS Grid多行在垂直方向的对齐方式，仅在容器有多余空间且含多行时生效；常用值如center使各行居中，space-between实现首尾贴边、中间等距，stretch则拉伸填满容器，需配合固定高度或未占满空间的行轨道使用。

css grid布局自动对齐align-content应用

在使用 CSS Grid 布局时，align-content 是一个非常实用的属性，用于控制网格容器中网格行在交叉轴（垂直方向）上的对齐方式。它只在网格容器有多余空间且包含多行网格轨道时才生效。

当你的 grid 容器设置了固定高度，或者其内容不足以填满容器高度时，如果定义了多个行轨道（比如用 grid-template-rows 或 repeat()），而这些行没有占满整个容器，那么剩余的垂直空间可以通过 align-content 来分配。

这个属性适用于多行或多列网格容器的总体对齐，与 align-items（控制单个网格项在单元格内的对齐）不同。

以下是常见的取值及其表现：

假设你有一个固定高度的 grid 容器，并定义了三行，但总高度小于容器高度：

MarsCode

字节跳动旗下的免费AI编程工具

339 查看详情 MarsCode

.container {
  display: grid;
  height: 500px;
  grid-template-rows: 100px 100px 100px;
  align-content: center;
}

此时，这三行总共 300px 高，容器高 500px，多出的 200px 将在上下均匀分布，实现垂直居中对齐。

若将 align-content: space-between，则第一行顶对齐，最后一行底对齐，中间行等距分布。

该属性仅在以下情况有效：

基本上就这些。合理使用 align-content 能让 grid 布局在垂直方向更灵活地适应内容和空间变化，是实现整体对齐的重要工具。

以上就是css grid布局自动对齐align-content应用的详细内容，更多请关注其它相关文章！