CSS Grid 布局成为了前端布局领域的一匹独眼巨人，其强大的布局能力和灵活的应用方式深受开发者们的喜欢。在网格布局中，我们经常会遇到子项的对齐问题，如何控制子项的对齐方式，能够让我们更好地掌控布局，并且让网页更加美观。
确定网格布局
在探索如何控制子项对齐方式之前，我们需要了解如何设置一个基本的网格布局。
定义一个网格布局需要使用 grid-template-columns 和 grid-template-rows 属性，它们分别对应了网格布局中列的宽度和行的高度，可以通过 px、em、fr、auto 等单位来设置宽高。
.grid-container { display: grid; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 100px 1fr; }
上面的例子定义了一个包含 3 列、2 行的网格布局，第 1 列宽度为 100px，第 2、3 列的宽度比例为 1:2，第 1 行高度为 100px，第 2 行的高度比例为 1:1。
子项位置和对齐方式
在网格布局中，子项在定义好的网格中占据一个或多个单元格，我们可以使用 grid-row、grid-column 和 grid-area 等属性来定义子项的位置。具体用法如下：
grid-row：定义子项所跨越的行数，如grid-row: 1 / 3表示子项跨越从第 1 行到第 3 行。grid-column：定义子项所跨越的列数，如grid-column: 2 / 4表示子项跨越从第 2 列到第 4 列。grid-area：定义子项所跨越的行列数，如grid-area: 1 / 2 / 3 / 4表示子项跨越从第 1 行第 2 列到第 3 行第 4 列。
当子项只跨越一个单元格时，也可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 属性来定义，如下所示：
.item { grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2; }
除了定义子项的位置外，我们还可以通过 justify-content 和 align-items 等属性来控制子项的对齐方式。
justify-content：水平方向上的对齐方式，可以取值start、end、center、space-between、space-around等。align-items：垂直方向上的对齐方式，可以取值start、end、center、stretch、baseline等。
.grid-container { display: grid; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 100px 1fr; justify-content: center; align-items: center; }
在上面的例子中，我们定义了网格容器的水平和垂直对齐方式均为居中对齐。
对齐网格线
使用 justify-items 和 align-items 属性可以针对每个子项单独设置它们在网格中的对齐方式。
justify-items：水平方向上的对齐方式，可以取值start、end、center、stretch。align-items：垂直方向上的对齐方式，可以取值start、end、center、stretch。
.item { justify-items: center; align-items: end; }
在上面的例子中，我们定义了一个子项的水平对齐方式为居中对齐，垂直对齐方式为底部对齐。
对齐内容
使用 justify-self 和 align-self 属性可以针对每个子项单独设置它们的内容在单元格内的对齐方式。
justify-self：水平方向上的对齐方式，可以取值start、end、center、stretch。align-self：垂直方向上的对齐方式，可以取值start、end、center、stretch。
.item { justify-self: end; align-self: center; }
在上面的例子中，我们定义了一个子项的水平对齐方式为底部对齐，垂直对齐方式为居中对齐。
综合示例
最后，让我们通过一个综合示例来演示如何在网格布局中控制子项的对齐方式。
HTML 代码：
<div class="container"> <div class="item first"></div> <div class="item second"></div> <div class="item third"></div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- ------ ---------------- ------- ------------ ------- - ------ - --------- - - ---- -- ------------ - - -- ------------- ------- ----------- ------ - ------- - --------- - - -- ------------ - - -- ------------- ---- ----------- ------- - ------ - --------- - - -- ------------ - - -- ------------- ------ ----------- ------ -展开代码
上面的代码定义了一个包含 3 个子项的网格布局，第 1 个子项跨越了第 1 列的所有行，第 2 个子项跨越了第 2、3 列的第 1 行，第 3 个子项占据了第 2、3 列的第 2 行。子项的对齐方式也分别设置得不同。
通过这个综合示例，我们可以更好地理解如何在网格布局中控制子项的对齐方式，实践中可以更加灵活地运用这些知识，让网页布局更加美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c5165e6e1fc40e36e572c5
