grid布局
grid布局，网格布局，与flex布局相似，不同的是，grid布局可以看做是flex布局的扩展，flex布局可以理解为一维的，grid布局可以理解为二位的。grid布局的属性同样分为容器属性和项目属性。
设为 grid 布局以后，容器子元素（项目）的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效。
容器属性
- grid-template-columns、grid-template-rows：列宽和行高。
（1）、repeat()：代表重复的数值或数值组合，接收两个参数，重复的次数和重复的数组（数组组合）；
（2）、auto-fill 关键字：用于单元格大小固定，容器大小不固定，每一行（列）容纳尽可能多的单元格，如grid-template-columns: repeat(auto-fill, 100px);
（3）、fr 关键字：比例关系，如 grid-template-columns: 1fr 2fr; 表示第二列是第一列的宽度的两倍
（4）、minmax()：接收两个参数，代表最小和最大长度，如 minmax(150px 1fr)；
（5）、auto关键字：表示由浏览器自己决定长度。
-
grid-row-gap、grid-column-gap、grid-gap: 行间距、列间距、行间距和列间距的缩写
-
grid-template-areas：定义网格区域的名称，
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：设置单元格水平位置、垂直位置、前两个属性的简写。属性的可选值为 start、end、center、stretch（默认值，代表拉伸占满整个宽度）
-
justify-content、align-content、place-content：设置整个内容区域在容器的水平位置、垂直位置，以及前两个属性的缩写。属性可选值为：start、center、end、space-around（每个项目两侧间隔相等，项目之间间隔是项目与容器间隔的两倍）、space-between（每个项目两侧间隔相等，项目与容器没有间隔）、space-evenly（每个项目两侧间隔相等，项目之间间隔是项目与容器间隔相等）
-
grid-auto-columns、grid-auto-rows：设置自动创建多余网格的列宽和行高，写法同 grid-template-columns 和 grid-template-rows 。若不指定这两个属性，将根据单元格内容大小指定新增网格列宽和行高；
项目属性
- grid-column-start、grid-column-end、grid-row-start、grid-row-end：左边框所在垂直网格线、右边框垂直网格、上边框水平网格线、下边框水平网格线。
（1）、若没有指定则按照 grid-auto-flow 决定。
（2）、这四个属性的值，除可以是网格线的序号，也可以是网格线的名称。
（3）、span关键字：表示左右（上下）跨越，如 grid-column-start：span 2；表示左右边框跨越2个网格，效果与 grid-column-start：span 2 一致
-
grid-column、grid-row：上边四个属性的缩写，中间用 "/" 隔开，如 grid-column：2 / span 2；斜杠后可以省略，默认赋值为1，代表跨越1个网格；
-
grid-area：指定项目在哪一个区域
（1）、如 grid-area: e。区域名称用 grid-template-areas 属性设置。
（2）、该属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置，如 grid-area: 1 / 1 / 3 / 3;
- justify-self、align-self、place-self：用法与 justify-items、align-items、place-items 一致，与它们的区别在于作用于单个项目
