手把手记录display: grid 网格布局

1. grid，网格布局，顾名思义，网格就要涉及到行和列，第一步就要搞清楚哪个是行，哪个是列。
   

2. Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线（横轴或者纵轴）的位置，属于一维布局。Grid 布局则是将容器划分成"行"和"列"的网格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

3. 还不被所有的浏览器所支持,在Firefox中，启用 layout.css.grid.enabled 标志

4. 三种类型：grid，inline-grid，subgrid

5. 基本用法实例：
   例1（基础用法）：
   display: grid; 生成网格
   grid-template-columns：竖向列宽的设置，表示三列，分别是300px;
   grid-template-rows: 横向列高的设置，表示两行，分别是200px;
   grid-row-gap: 横向行与行之间的间距（注意字面意思行与行）
   grid-column-gap: 列与列之间的间距（注意字面意思列与列）
   grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，第一个值表示行间距，第二个值表示列间距，只有一个值，则同时表示行间距和列间距

   		.grid_Box{
        
               margin: 50px auto;
               width: 1000px;