如何在 CSS Grid 中进行对齐与分布-JavaScript中文网-JavaScript教程资源分享门户

前言

CSS Grid 是介于传统的 float / position 和 flexbox 之间的一个新的布局方案。它可以非常方便地实现对齐和分布，本文将会从这两个方面为大家详细讲解。

对齐

对齐包括水平和垂直两个方向，CSS Grid 为我们提供了以下的属性：

align-items：设置交叉轴的对齐方式，类似于 flexbox 的 align-items。
justify-items：设置主轴的对齐方式，类似于 flexbox 的 justify-items。
align-content：设置交叉轴多个行之间的对齐方式，类似于 flexbox 的 align-content。
justify-content：设置主轴多个列（或者说网格区域）之间的对齐方式，类似于 flexbox 的 justify-content。

垂直方向对齐

在实现垂直方向的对齐之前，我们需要了解一下 CSS Grid 中行和列的概念。在 Grid 中，我们可以通过 grid-template-rows 和 grid-template-columns 来定义行和列。下面的示例中，我们定义了一个包含 3 行 3 列的 Grid 布局：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Grid 中默认的行高和列宽是自动计算而来的，也就是说它们的值是根据 Grid 内容的大小和数量自动生成的。

在 Grid 中实现垂直方向的对齐非常简单，我们可以使用 align-items 和 align-content 属性来控制 Grid 的垂直方向对齐方式。下面的例子中，我们将交叉轴对齐方式设置为 center，就可以使 Grid 的所有子元素在垂直方向上居中对齐了：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: center; /* 将交叉轴对齐方式设置为居中 */
}

水平方向对齐

在实现水平方向对齐之前，我们需要对 Grid 中子元素的定位方式有所了解。在 Grid 中，子元素可以通过 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 四个属性来定义自己的位置。

下面的代码中，我们定义了一个 Grid 容器和 3 个子元素，其中子元素 1 占据了第一列的第一行和第二行，因此它的 grid-row-start 属性设置为 1，grid-row-end 属性设置为 3，grid-column-start 属性设置为 1，grid-column-end 属性设置为 2。

// javascriptcn.com 代码示例
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item-1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.item-2 {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item-3 {
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 3;
}

在 Grid 中实现水平方向对齐也非常简单。我们可以使用 justify-items 和 justify-content 属性来控制 Grid 的水平方向对齐方式。下面的例子中，我们将主轴对齐方式设置为 center，就可以使 Grid 的所有子元素在水平方向上居中对齐了：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center; /* 将主轴对齐方式设置为居中 */
}

分布

分布也包括水平和垂直两个方向，CSS Grid 为我们提供了以下的属性：

grid-template-rows：设置每行的高度。
grid-template-columns：设置每列的宽度。
grid-row-gap：设置行与行之间的间隔。
grid-column-gap：设置列与列之间的间隔。

垂直方向分布

实现垂直方向的分布非常简单。我们可以使用 grid-template-rows 来设置每行的高度，grid-row-gap 来设置行与行之间的间隔。下面的例子中，我们将 Grid 的行高设置为 200px、100px 和 300px，行与行之间的间隔设置为 20px，就可以实现垂直方向的分布了：

.container {
  display: grid;
  grid-template-rows: 200px 100px 300px;
  grid-row-gap: 20px; /* 将行与行之间的间隔设置为 20px */
}

水平方向分布

实现水平方向的分布也非常简单。我们可以使用 grid-template-columns 来设置每列的宽度，grid-column-gap 来设置列与列之间的间隔。下面的例子中，我们将 Grid 的列宽设置为 200px、100px 和 300px，列与列之间的间隔设置为 20px，就可以实现水平方向的分布了：

.container {
  display: grid;
  grid-template-columns: 200px 100px 300px;
  grid-column-gap: 20px; /* 将列与列之间的间隔设置为 20px */
}

总结

本文主要是介绍了如何在 CSS Grid 中实现对齐和分布的操作，从代码和表现效果上也为大家展示了如何通过这些属性来使用 CSS Grid 布局。通过本文的介绍，相信大家已经掌握了 Grid 中的对齐和分布方法，并可以在实践中灵活运用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f7c347d4982a6eb90d973