介绍
CSS Grid 是一种灵活的布局方式，它使得前端开发人员可以直接使用 HTML 语义化标签布置页面的布局。它有助于实现复杂的网格布局和栅格布局，而且在响应式设计中使用极为便利。在本文中，我们将介绍如何使用 CSS Grid 实现栅格垂直对齐。
CSS Grid 是一个二维的网格系统，包含列和行。通过定义一个容器元素（即使用 display: grid; 将一个元素转换为网格布局），可以将所有的子元素放置在网格中。CSS Grid 为开发人员提供了更多的控制权，可以让我们按照需要对页面进行排版，同时提高页面性能。
CSS Grid 与其他布局方式不同的是，它是通过 CSS 属性设置的。使用 CSS Grid 进行布局时，不需要通过 HTML 或者 JavaScript 进行任何额外的操作。
栅格垂直对齐
在进行栅格垂直对齐时，我们通常需要将栅格中的内容放在网格行的中心或底部。我们使用 align-items 属性设置这一目标，将栅格中的内容纵向对齐。
.container {
display: grid;
align-items: center; /* 将网格行对齐到中心 */
/* 以下为其他属性设置 */
}通过 align-items，我们可以实现垂直居中和底部对齐。这个属性设置的值还可以是 stretch、start、end 和 baseline。其中，stretch 会将栅格自动拉伸到与容器等高（或等宽）。
实例
下面，我们将使用一个实际的例子进行讲解。
HTML 代码：
<div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- --------- ----- ------------ ------- -- -------- -- - ------ - ------------ ---- ------- ------ ----------------- -------- ------ ------ ---------- ----- -------- ----- ---------------- ------- -- ------ -- ------------ ------- -- ------ -- - ------ - ------- ------ ----------------- -------- ---------- ----- -------- ----- ---------------- ------- -- ------ -- ------------ ------- -- ------ -- - ------ - --------- ---- ------- ------ ----------------- -------- ------ ------ ---------- ----- -------- ----- ---------------- ------- -- ------ -- ------------ ------- -- ------ -- -
结果如下所示：
我们定义了一个三列的网格布局，并在栅格中添加了三个子项。其中，item1 占用了前两列（grid-column: 1/3;），item3 占用了第二行和第三行（grid-row: 2/4;）。
使用 align-items 属性，我们将栅格的内容对齐到了垂直方向的中心。此时整个栅格垂直居中。
结论
CSS Grid 使得我们可以更加容易地进行栅格布局。而在这种布局方式中实现栅格垂直对齐也是同样简单的。CSS Grid 提供了 align-items 属性来实现垂直对齐的目的。我们可以使用这一属性将栅格内容纵向对齐到容器的中心或底部。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703b15ed91dce0dc84c3701