Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用
float ,
inline-block ,
position 这些本质上是 hack 的方法。CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。
它像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。
网格布局概念
在学习之前需要了解以下网格的几个概念。
网格轨道（Grid Tracks）
网格轨道 是两条网格线之间的空间。它们通过使用属性
grid-template-columns 和
grid-template-rows 在网格中定义。
上图中有两行三列，一行或一列就叫做轨道。
网格线（Grid Lines）
使用
Grid 布局在显式网格中定义轨道的同时会创建网格线。网格线可以用它们的编号来寻址。在从左到右的语言中，
列线1 将位于网格的左侧，
行线1 将位于其顶部。线编号遵循文档的写入模式，因此在从右到左的语言中，
列线1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。
网络单元格（Grid Cell）
在
Grid 布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。
网格区域（Grid Areas）
网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。
网格间距（Gutters）
网格间距是网格轨道之间的间距，可以通过
