CSS Grid 是一个非常强大的布局系统，可以轻松帮助我们实现复杂的页面布局，同时也可以通过一些简单的设置实现子元素的排序与对齐方式。在本篇文章中，我们将深入探讨如何利用 CSS Grid 实现子元素的排序与对齐方式，并提供一些有指导意义的示例代码。
1. CSS Grid 基础知识
在深入探讨子元素排序与对齐方式前，我们需要先了解一些 CSS Grid 的基础概念，这样才能更好地理解下面的具体内容。
1.1 网格容器与网格项
在 CSS Grid 中，我们需要先定义一个网格容器，通过将 display 属性设置为 grid 或 inline-grid 来创建网格布局。而网格容器中的每一个子元素称为网格项，我们也称之为网格单元。
1.2 网格线与网格轨道
在网格容器中，我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。这时我们会发现，所有的列和行之间都有一些看不见的线，这些线称为网格线。而每一个由相邻的网格线所组成的空间，称为网格轨道。
1.3 网格区域
在 CSS Grid 中，我们可以将网格轨道组合成一个个的网格区域，以便进行更加精细的布局。网格区域可以通过 grid-template-areas 属性进行定义，可以用字母或字符串来表示网格区域。
2. 子元素的排序
2.1 水平与垂直排序
利用 CSS Grid，我们可以轻松地实现子元素的排序，即将多个子元素按照一定的顺序排列。对于水平排序，我们可以使用 grid-template-columns 属性，通过逗号分隔来设置每一个子元素的宽度。同时，我们还可以使用 grid-auto-rows 属性来设置每一个子元素的高度。例如：
-- -------------------- ---- ------- ------- - -------- ----- ---------------------- --------- ----- --------------- ------ - ------ - ----------------- ----- ------- --- ----- ----- -
这样，我们就可以将父容器中的子元素按照 3 列的布局方式进行水平排序，同时每一个子元素的高度都是 100px。
对于垂直排序，我们可以使用 grid-template-rows 属性，也是通过逗号分隔来设置每一个子元素的高度。而 grid-auto-columns 属性则可以用于设置每一个子元素的宽度。例如：
-- -------------------- ---- ------- ------- - -------- ----- ------------------- --------- ----- ------------------ ------ - ------ - ----------------- ----- ------- --- ----- ----- -
这样，我们就可以将父容器中的子元素按照 3 行的布局方式进行垂直排序，同时每一个子元素的宽度都是 100px。
2.2 网格区域排序
除了可以使用水平和垂直排序之外，我们还可以利用网格区域来进行子元素的排序。通过 grid-template-areas 属性定义网格区域，并利用 grid-area 属性来指定每一个子元素所占据的网格区域。例如：
-- -------------------- ---- -------
------- -
-------- -----
--------------------
------- ------ -------
---- ---- -----
---- ---- -----
------- ------ --------
------------------- --------- -----
---------------------- --------- -----
-
------- -
---------- -------
-
---- -
---------- ----
-
----- -
---------- -----
-
------- -
---------- -------
-这样，我们就可以将父容器中的子元素按照网格区域进行排序。
3. 子元素的对齐方式
除了可以进行子元素的排序之外，我们还可以利用 CSS Grid 实现子元素的对齐方式。下面将为大家介绍三种常用的对齐方式。
3.1 水平对齐
对于子元素的水平对齐方式，我们可以使用 justify-items 属性。此属性可以用于设置子元素在水平方向上的对齐方式，可以取值为 start、end、center、stretch 和 auto。例如：
-- -------------------- ---- ------- ------- - -------- ----- -------------- ------- - ------ - ----------------- ----- ------- --- ----- ----- ------- ------ ------ ------ -
这样，我们就可以将父容器中的子元素在水平方向上居中对齐。
3.2 垂直对齐
对于子元素的垂直对齐方式，我们可以使用 align-items 属性。此属性可以用于设置子元素在垂直方向上的对齐方式，可以取值为 start、end、center、stretch 和 auto。例如：
-- -------------------- ---- ------- ------- - -------- ----- ------------ ------- - ------ - ----------------- ----- ------- --- ----- ----- ------- ------ ------ ------ -
这样，我们就可以将父容器中的子元素在垂直方向上居中对齐。
3.3 水平和垂直对齐
对于子元素的水平和垂直对齐方式，我们可以使用 justify-content 和 align-content 属性。这两个属性可以用于设置子元素在水平和垂直方向上的对齐方式，可以取值为 start、end、center、stretch 和 space-around 等。例如：
-- -------------------- ---- ------- ------- - -------- ----- ---------------- ------- -------------- ------------- ------- ------ - ------ - ----------------- ----- ------- --- ----- ----- ------- ------ ------ ------ -
这样，我们就可以将父容器中的子元素在水平方向上居中对齐，在垂直方向上分散排布。
4. 总结
通过上面的介绍，我们可以看到 CSS Grid 可以轻松实现子元素的排序与对齐方式。同时，在实际开发中，我们可以结合具体的需求进行适当的调整，从而实现更加复杂的布局方案。最后再给大家提供一份完整的示例代码。
<div class="parent"> <div class="header">Header</div> <div class="nav">Nav</div> <div class="main">Main</div> <div class="footer">Footer</div> </div>
-- -------------------- ---- -------
------- -
-------- -----
--------------------
------- ------ -------
---- ---- -----
---- ---- -----
------- ------ --------
------------------- --------- -----
---------------------- --------- -----
---------------- -------
-------------- -------------
------- ------
-
------- -
---------- -------
----------------- -----
------ -----
-
---- -
---------- ----
----------------- -----
------ -----
-
----- -
---------- -----
----------------- -----
------- --- ----- -----
-
------- -
---------- -------
----------------- -----
------ -----
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659116b3eb4cecbf2d654647