为了实现更加复杂的布局，CSS Grid 提供了对于嵌套网格的支持。这种方式可以让你将一个网格的单个单元格转化成另一个网格的容器。这对于实现更大规模的页面设计非常有用，而且也非常灵活。
在这篇文章中，我们将会深入探讨如何在 CSS Grid 中实现深度嵌套布局。我们会探讨如何在父级网格中创建子级网格，并介绍一些示例来帮助你更好的理解 CSS Grid 的深度嵌套布局。
创建子级网格
要在 CSS Grid 中创建深度嵌套布局，你需要首先在父级网格中创建一个或多个子级网格。实现这个步骤，你需要用到 grid-template-areas 属性。
在下面的例子中，你看到我们要在一个叫做 .container 的父级网格中创建两个子级网格。我们通过在 grid-template-areas 属性中输入一个二维矩阵来实现这个功能。这个矩阵的每一个元素都代表一个单元格，用句号(".")来代表一个空单元格。
-- -------------------- ---- -------
---------- -
-------- -----
--------- ----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ ----- ------
----- ---- --- ----
----- ---- --- ----
-- ------ ------ --------
-在这个例子中，父级网格共有四行和四列，其中的空单元格用 "." 代替。父级网格中的 12 个单元格被划分为了 4 个区域，分别是 "header"、"left"、"mid"、"right" 和 "footer"，这些区域将是我们子级网格的位置。
嵌套网格
一旦我们在父级网格中创建了子级网格，就可以在这些子级网格中进一步创建新的网格。我们可以使用 grid-template-areas 属性在每个子级网格中定义一个或多个新的子级网格。在下面的例子中，我们可以看到 .left 这个子级网格中定义了一个二级子级网格。
-- -------------------- ---- -------
---------- -
-------- -----
--------- ----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ ----- ------
----- ---- --- ----
----- ---- --- ----
-- ------ ------ --------
-
----- -
-------- -----
--------- ----
---------------------- --------- -----
------------------- --------- -----
--------------------
-- - --
-- - --
-- - ---
-在这个例子中，我们在父级网格中的 "left" 区域中创建了一个新的（二级）子级网格。我们在 .left 类的 CSS 中使用了和父级网格相同的属性，唯一不同的是，我们把 grid-template-areas 属性更新为了新的子级网格。这个新的子级网格中包含了 6 个单元格，其中包括了 3 个二级子级网格："a"、"b"、"c"、"d"、"e" 和 "f"。
示例代码
你可以在下面的代码块中查看完整的示例代码，使用 css grid 来实现深度嵌套布局：
-- -------------------- ---- -------
---------- -
-------- -----
--------- ----
---------------------- --------- -----
------------------- --------- -----
--------------------
------- ------ ----- ------
----- ---- --- ----
----- ---- --- ----
-- ------ ------ --------
-
----- -
-------- -----
--------- ----
---------------------- --------- -----
------------------- --------- -----
--------------------
-- - --
-- - --
-- - ---
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
-- -
---------- --
-
------ -
---------- -------
-
----- -
---------- ------
-
--- -
---------- ----
-
------ -
---------- -------
-结论
CSS Grid 提供了一种灵活的方式来实现深度嵌套布局。你可以使用 grid-template-areas 属性来在父级网格中创建子级网格，并在子级网格中创建更深层次的嵌套网格。在你的设计中，天知道最多需要多少层嵌套，但 CSS Grid 的嵌套功能可以让你轻松地完成复杂的设计和布局。
如果你觉得这篇文章对你有帮助，记得分享给你的朋友们，让更多人了解 CSS Grid 的深度嵌套布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f67727c5c563ced586e50f