前言
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 布局：
---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- ---- ----- -
Grid 中默认的行高和列宽是自动计算而来的，也就是说它们的值是根据 Grid 内容的大小和数量自动生成的。
在 Grid 中实现垂直方向的对齐非常简单，我们可以使用 align-items 和 align-content 属性来控制 Grid 的垂直方向对齐方式。下面的例子中，我们将交叉轴对齐方式设置为 center，就可以使 Grid 的所有子元素在垂直方向上居中对齐了：
---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- ---- ----- ------------ ------- -- ------------- -- -
水平方向对齐
在实现水平方向对齐之前，我们需要对 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。
---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- ---- ----- - ------- - --------------- -- ------------- -- ------------------ -- ---------------- -- - ------- - --------------- -- ------------- -- ------------------ -- ---------------- -- - ------- - --------------- -- ------------- -- ------------------ -- ---------------- -- -
在 Grid 中实现水平方向对齐也非常简单。我们可以使用 justify-items 和 justify-content 属性来控制 Grid 的水平方向对齐方式。下面的例子中，我们将主轴对齐方式设置为 center，就可以使 Grid 的所有子元素在水平方向上居中对齐了：
---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- ---- ----- -------------- ------- -- ------------ -- -
分布
分布也包括水平和垂直两个方向，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，就可以实现垂直方向的分布了：
---------- - -------- ----- ------------------- ----- ----- ------ ------------- ----- -- ------------ ---- -- -
水平方向分布
实现水平方向的分布也非常简单。我们可以使用 grid-template-columns 来设置每列的宽度，grid-column-gap 来设置列与列之间的间隔。下面的例子中，我们将 Grid 的列宽设置为 200px、100px 和 300px，列与列之间的间隔设置为 20px，就可以实现水平方向的分布了：
---------- - -------- ----- ---------------------- ----- ----- ------ ---------------- ----- -- ------------ ---- -- -
总结
本文主要是介绍了如何在 CSS Grid 中实现对齐和分布的操作，从代码和表现效果上也为大家展示了如何通过这些属性来使用 CSS Grid 布局。通过本文的介绍，相信大家已经掌握了 Grid 中的对齐和分布方法，并可以在实践中灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653f7c347d4982a6eb90d973