CSS布局之网格区域

声明区域

到目前为止，咱们采用数字描述的方式，可以让网格工作的很好，但网格模板区域（ Grid Template Areas）可以让布局更为直观。

具体来说，可以对网格区域命名。使用这些已命名的网格区域(替代网格线的数字)来给网格项目定位。接下来的示例是使用网格区域的名称来制作一个粗略的页面布局，这个布局主要包括：

我们需要在网格容器上定义这些网格区域的名称，就像是在这里绘制一个布局一样：

网格项目定位

现在我们要关注的是网格项目，这里使用grid-area来替代了前面所使用的grid-column和grid-row规则：

第一个网格项目是页头，它跨越了三个header。第二个项目分配到主内容区域，第三个是侧边栏，第四个是页脚。而这些都不需要按照顺序源（文档流）来使用。我们可以轻松的将.item-4变成页头。

正如你看到的，这使得网而的布局变得更加容易。事实上，上面的示例直观的表达了我们所需要的网格区域名称，其实，我们还可以更进一步的，可以使用一些表情符来声明网格的区域。

效果如下：

网格区域嵌套

很多时候，Web的页面有各种的嵌套，所以我们一起来看看如何使用网格来实现这种嵌套的布局。

当我们使用display:grid就已经声明了一个网格容器，只要是它的后代元素就会自动成为网格项目。内容添加到这些子元素内网格一点都不会受影响，除非我们显示的重置过。

接下来的示例中，把.item-5、.item-6和.item-7放在.item-2里面：

所以我们只需要把.item-2也声明为一个网格容器，而且是一个两行两列的网格：

我们可以在这里继续使用header、article和sidebar来给网格区域命名。不会造成不必要的麻烦的，因为这一切都跟其上下文有关。而这些网格区域只适用于.item-2这个网格内。

总结

简单总结一下前面讨论的东西：

通过这篇文章，我们又学到了一些有关于CSS Grid布局的一些规范，这让我们使用CSS Grid来布局在现实中越来越近。在接下来的教程中，我们将看到一些复杂的布局。