网格布局 - justify-content 与 align-content

简介

CSS网格布局是一种二维布局系统，由行和列组成，使开发人员能够轻松对页面中的元素进行排列。justify-content和align-content是用于控制网格行和列的对齐方式。

justify-content

justify-content属性用于控制网格行（Grid Rows）中的对齐方式。它可以设置为以下值：

• start：默认值，行的起点对齐容器的起点。
• end：行的终点对齐容器的终点。
• center：行沿中心线对齐。
• space-between：在行之间均匀地分配额外的空间，使第一行紧贴容器起点，最后一行紧贴容器终点。
• space-around：在行周围均匀地分配额外的空间，使第一行和最后一行与容器的起点和终点保持相等的距离，并且每行之间的空间相等。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

align-content

align-content属性用于控制网格列（Grid Columns）中的对齐方式。它可以设置为以下值：

• start：默认值，列的起点对齐容器的起点。
• end：列的终点对齐容器的终点。
• center：列沿中心线对齐。
• space-between：在列之间均匀地分配额外的空间，使第一列紧贴容器起点，最后一列紧贴容器终点。
• space-around：在列周围均匀地分配额外的空间，使第一列和最后一列与容器的起点和终点保持相等的距离，并且每列之间的空间相等。

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-content: center;
}

结论

CSS网格布局提供了比传统布局更直观的布局方式，并且可以很容易地控制元素相对于行和列的位置。通过使用justify-content和align-content属性，我们可以控制网格行与列的对齐方式，以进一步精细调整我们的页面布局。