容器属性
grid
没什么好说的，设置成grid布局。
grid-template-columns
将网格分成多少列，并设置每一列宽度（单位：px,%,fr）
fr: fraction, 分数。等分的意思。
grid-template-columns: 1fr 1fr 1fr;
// 将容器划分成三列，每列宽度1/3.
grid-template-rows
同上，划分行。
grid-template-rows: 1fr 1fr;
// 将容器划分成两列，每列宽度1/2.
至此，我们将容器划分成了两行三列。
1 | 2 | 3
4 | 5 | 6
grid-template-areas
要与子元素属性(grid-area)结合起来。将某一个区域命名。
grid-areas:
"item1 item1 item2"
"item3 item3 item2"
格式如上。划分的区域必须组成一个矩形！！！
上述划分意味着：
item1 | item1 | item2
item3 | item3 | item2
然后子级通过设置grid-area: item1 表示当前元素占据第一行的1、2列。
grid-template
grid-template是grid-template-areas,grid-template-rows,grid-template-columns的缩写。
grid-template: <grid-template-rows>/<grid-template-columns>
grid-template:
"item1 item1 item2" 1fr
"item3 item3 item2" 1fr
/ 1fr 1fr 1fr
// 等同于上面三部分代码。
grid-gap
是grid-column-gap和grid-row-gap的缩写。代表网格间的间隙。
grid-gap: <grid-row-gap> <grid-column-gap>
place-items
是justify-items和align-items的缩写.
place-items: <align-items> <justify-items>
place-items: start end;
设置该属性后子元素的宽高不再是100%；而是等于内容的宽高！
grid-atuo-flow
定义元素如何排列，默认是row，即“先行后列”，一行排列不下后在换行排列。
四个属性：row,row dense(不留空行), column, column dense
子元素属性
grid-column
grid-column: <grid-column-start> / <grid-column-end>
// for example
grid-column: 1 / 3; // 占据两个单元格
grid-column: 1 / span 2;
grid-row
同grid-column
grid-area
可以直接根据grid-template-areas定义的区域块来定位元素占据的位置。
grid-area: item1; // 结合上面grid-template-areas的定义
or
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
place-self
作用同place-items一样，只不过仅仅只作用于当前元素
place-self: <align-self> <justify-self>;
