CSS Grid 布局是一种最新、最强大的网格布局方法，它可以允许开发者在一个容器中以网络的形式分布子项。CSS Grid 布局系统是一种相对位置的布局方式，可以在一个容器中实现多层次嵌套关系，使布局变得更加自由、灵活，可以说是我们前端开发者必备的技能之一。
在本篇文章中，我们将探讨如何通过 CSS Grid 布局实现子项之间的嵌套关系，帮助大家更好地理解和应用这种强大的布局方法。
布局原理
在 CSS Grid 布局中，容器是我们能够控制的最外层元素，而网格就是由一系列行和列构成的二维网格系统。在这个网格中，每一个子项都可以设置其在行列方向上的起始和终止位置，从而实现不同的布局效果。
CSS Grid 布局用的属性主要有以下几个：
- grid-template-columns 和 grid-template-rows：指定网格的列数和行数及其大小。
- grid-column-start、grid-column-end、grid-row-start 和 grid-row-end：指定子项的起始和终止行列数。
- grid-column 和 grid-row：用来使用 grid-column-start 和 grid-column-end 以及 grid-row-start 和 grid-row-end 的缩写方式方便指定子项所占的行列数。
了解了这些属性后，我们就可以通过设置子项的起始和终止行列数来实现子项之间的嵌套关系。
实现嵌套
为了更好地说明如何实现嵌套，我们通过一个具体的例子来演示。下面是一个示例布局：
-- -------------------- ---- -------
---- -----------------------
---- ---------------------------
---- -----------------------------
---- -------------
---- ---------------------------
---- -----------------------------
------
---- ---------------------------
------这个布局包含了一个容器 grid-container，以及 5 个子项 header、sidebar、main、footer 和 banner、content，其中 main 这个子项是由 banner 和 content 两个子项嵌套而来的。
现在我们来看看如何通过 CSS Grid 布局来实现这个布局。
首先，我们需要通过 grid-template-columns 和 grid-template-rows 来指定网格的列数和行数及其大小，如下所示：
.grid-container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
}这里我们设定了三列和三行，其中第一行和第三行的高度自动适应内容，第二行为 1fr，即填充剩余空间。接着，我们再来设定每个子项所占的行列数。
-- -------------------- ---- ------- ------- - ------------ - - -- --------- - - -- - -------- - ------------ - - -- --------- - - -- - ----- - ------------ - - -- --------- - - -- -------- ----- ---------------------- ---- ------------------- ---- ---- - ------- - ------------ - - -- --------- - - -- - -------- - ------------ - - -- --------- - - -- -
这一部分的设置是关键，需要我们经过一番计算才能确定每个子项所占的行列数。首先，header 这个子项占据了整个容器的第一行，因此它的 grid-column 值为 1/4，grid-row 值为 1/2。sidebar 这个子项只占据了第一个列，它的 grid-column 值为 1/2，grid-row 值为 2/3。接下来是核心部分，我们将 main 这个子项设置为一个新的嵌套网格，它占用了第二列，grid-column 值为 2/3，grid-row 值为 2/3。banner 和 content 这两个子项则分别占据了第一行和第二行，它们的 grid-column 值都为 1/2，但是 grid-row 值不同，分别为 1/2 和 2/3。
最后，我们将 footer 这个子项占据了整个容器的最后一行，它的 grid-column 值为 1/4，grid-row 值为 3/4。
这样，子项就按照我们想要的顺序和布局进行了排列，达到了嵌套的目的。
总结
在 CSS Grid 布局中，我们可以通过设置子项的起始和终止行列数来实现子项之间的嵌套关系，从而实现更加自由、灵活的布局。以上就是实现嵌套的具体方法，希望可以帮助大家更深入地了解 CSS Grid 布局的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fdf65295b1f8cacdd0b519