介绍
CSS Grid网格布局是二维布局，将容器分成行、列。
将容器的display属性设置为grid或者inline-grid，就创建了一个网格容器，所有顶层子元素自动成为网格项目。
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
容器属性
1、display： grid与inline-grid
2、grid-template-columns grid-template-rows
grid-template-columns 定义列宽
grid-template-columns: 50px 100px 50px;
grid-template-rows 定义行高
grid-template-rows: 50px 100px 50px;
列宽、行高除了像素之外还可以用百分比设置
如：
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
repeat()
repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
也可以用来重复某种模式
grid-template-columns: repeat(2, 100px 20px 80px);
//定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px
auto-fill关键字
适用情况：单元格的大小是固定的，但是容器的大小不确定，希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns: repeat(auto-fill, 100px);
//表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
}
fr关键字
方便表示比例关系
grid-template-columns: 1fr 2fr;
//表示后者是前者的两倍
fr 还可以与绝对长度的单位结合使用
grid-template-columns: 150px 1fr 2fr;
//第一列为150px 第二列的宽度为容器宽度减去150px，然后除以三 第三列的宽度为第二列的两倍
容器宽度为300px 第二列为50px
minmax()
产生一个长度范围，接受两个参数 ，最小值，最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
//minmax(100px, 1fr)表示列宽不小于100px，不大于1fr
auto关键字
表示由浏览器自己决定长度 ，如果容器设置了宽度，就是容器宽度减去其他列的宽度
网格线名称
可以使用方括号，指定每一根网格线的名字，方便以后的引用
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
//指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。
网格布局允许同一根线有多个名字，比如[fifth-line row-5]
grid-row-gap grid-column-gap grid-gap
grid-row-gap属性设置行间距，grid-column-gap属性设置列间距。 grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下
grid-gap: 20px 20px;
//grid-gap: <grid-row-gap> <grid-column-gap>;
如果grid-gap 省略了第二个值，默认第二个值等于第一个值。
***最新标准 ， grid- 前缀可以删除，写成 column-gap row-gap gap。
grid-template-areas
定义区域
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
//划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格
