grid布局

Grid布局：有兼容，IE（都别看我啊）
display：grid；
display：inline-grid；

属性：
grid-template-columns：定义每一列的列宽
grid-template-rows：定义每一行的行高
有如下用法：
1. grid-template-columns: 100px 100px 100px;//三列，每列100px
grid-template-rows: 100px 100px 100px;

2. grid-template-columns: 33.33% 33.33% 33.33%;//三列，每列占比33.33%
grid-template-rows: 33.33% 33.33% 33.33%;

3.grid-template-columns: repeat(3, 33.33%);//一列33.33%重复三次
grid-template-rows: repeat(3, 33.33%);

4.grid-template-columns: repeat(2, 100px 20px 80px);//三列分别为100px，20px，80px重复两次

5.auto-fill关键字：有时，单元格的大小是固定的，但是容器的大小不确定。
如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns: repeat(auto-fill, 100px);

6.fr关键字：为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
grid-template-columns: 150px 1fr 2fr;代表第一列150px；第三列是第二列的两倍

7.minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

8.auto关键字:表示浏览器自己决定长度
grid-template-columns: 100px auto 100px;

9.定义网格线名称：
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];//中括号括起来的为网格线名称
允许同一根线有多个名字，如：[fifth-line row-5]

属性：
grid-row-gap：属性设置行与行的间隔（行间距）
grid-column-gap ：属性设置列与列的间隔（列间距）
grid-gap ：<grid-row-gap> <grid-column-gap>;合并简写
根据最新标准，上面三个属性名的grid-前缀已经删除。

grid-template-areas：定义区域a,b,c,d,e,f,g,h,i

grid-auto-flow:默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。
row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。

justify-items:设置单元格内容的水平位置。
align-items:设置单元格内容的垂直位置。
place-items: <align-items> <justify-items>;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

justify-content：整个内容区域在容器里面的水平位置
align-content：整个内容区域的垂直位置
place-content: <align-content> <justify-content>
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

grid-auto-columns ，定义生成的多余的列的列宽
grid-auto-rows 定义生成的多余的行的行高

定义项目位置：
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
可以用网格线名字
也可以grid-column-start: span 2;span代表跨越，左边框距离右边框跨越两个网格

grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-column: 1 / 3;
grid-row: 1 / 2;

grid-area:e指定项目放在哪一个区域,如e

justify-self 属性，设置单元格内容的水平位置，但只作用于单个项目
align-self 属性，设置单元格内容的垂直位置，但只作用于单个项目
place-self: <align-self> <justify-self>;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;