css Grid对齐属性align-content justify-content应用

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 类似：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

• 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 布局的整体外观。

以上就是css Grid对齐属性align-content justify-content应用的详细内容，更多请关注php中文网其它相关文章！