《CSS Grid布局：网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格，并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过，这样的单元格如同表格一样，仅仅一个个独立的单元格是无法满足一些复杂的Web布局，我们需要将多个单元格合并在一起，拼装成一个稍为复杂一点的布局。简单点说，就是由单元格慢慢过渡到具有合并单元格的布局（在脑海中想想曾经爱过的table）。

我想通过前面几篇有关于CSS Grid布局的介绍，大家对CSS Grid Layout也略有了解吧，如果你有动手写过的话，你应该可以借助网格线制作一些布局效果出来，比如说单元格布局，合并单元格布局等。是否有一种感觉，CSS Grid Layout好强大，好灵活。是不是期待浏览器厂商早一天能支持。

在CSS Grid Layout中除了可以使用风格线实现网格布局之外，还可以使用网格区域来实现布局。在《CSS Grid布局：网格单元格布局》和《CSS Grid布局：合并单元格布局》文中都已经领略了CSS Grid Layout中gird-area实现的单元格和合并单元格的布局，但这仅是网格布局使用较为简单、基础的应用。在这篇文章中，将和大家一起探讨CSS Grid Layout中grid-area其他的功能与使用。

最近一直在学习CSS Grid布局相关的知识与使用，虽然目前浏览器对其支持度还并不十分的友好，但我始终相信有一天，浏览器会支持，Web人员也迟早有一天能在自己的布局中使用上CSS Grid。前几天花了几节内容，介绍了CSS Grid布局中的概念、测试环境、创建单元格、合并单元、网格线创建和网格区域相关的内容。可以说这些内容都是CSS Grid布局最基础和最常用的相关知识，当然，除了这些之外，还会有其他相关的知识，今天要与大家一起探讨的就是有关于CSS Grid Layout中的独立源与网格层叠顺序。

HTML文档中有文档流，其实在CSS Grid Layout中有网格流。简单点理解就是，在一个被显式声明为网格的容器中，其所有子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，浏览器将会自动为这些网格单元格的位置进行计算，按照先后顺序从左向右，或从上到下排列。在这里把这种方式称之为网格的流动。

随着 Web 应用程序变得越来越复杂，我们需要更自然的方式，在不使用hacky解决方案的情况下，如:使用浮动和其它繁琐的技术，就可以轻松做出高级的布局。令人兴奋的是产生了一种适用于布局的新解决方案---CSS Grid布局模块。在这个介绍性的教程中，我会向大家介绍这个相对较新的 CSS 功能，我将先讨论一下当前浏览器的支持情况，之后我会用一些例子告诉大家CSS Grid布局模块是如何工作的。

CSS 网格布局模块，虽然现在仍处于编译者的草案之中但是即将定稿。我们现在可以在一些浏览器中进行测试并可以检测其潜在的bug。CSS 网格布局是真的很复杂，相较于 Flexbox 更是如此。它具有17个新属性并且在如何使用CSS书写方面介绍了很多新概念。为了尝试如何使用萦绕在我脑海中的这些新规范，我决定创建一个圣杯布局尝试新规范工作原理。

CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。如我们所知，CSS 总是用于网页的样式设置，但它并没有起到很好的作用。刚开始的时候我们使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。虽然Flexbox可以起到一定的补救作用，但是它只可以实现简单的一维布局，并不适用于复杂的二维布局(实际上 Flexbox 和 Grid 可以一起结合使用起到最佳效果)。网格是 CSS 第一次专门创建的模块，用来解决我们之前在制作网站时使用hacks处理布局问题。

我们将了解前沿的CSS Grid布局，从而了解CSS Grid布局是如何改变Web的布局。这篇文章是一篇快速入门的文章，将会跳过一些细节和其中的细微差别，其主要是帮助你了解前沿的CSS Grid布局。

在上一节介绍了Grid的基础知识，在前一节的基础上介绍Grid的新特性，怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局。