grid布局即网格布局（二维），flex布局（一维）
1.grid-template-columns属性设置列宽， grid-template-rows属性设置行高
①
grid-template-columns：200px ,300px,400px;
/* 声明了三列，宽度分别为 200px 300px 400px */
grid-template-rows：200px ,300px,400px;
/* 声明了三行，高度分别为 200px 300px 400px */
② fr将空间分成多个等分空间
grid-template-rows: 1fr 2fr 3fr;
三行，高度比1:2:3;
③ repeat():简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
grid-template-rows: 1fr 1fr 1fr;
等价于grid-template-rows: repeat(3,1fr);
④minmax():函数接受两个参数，分别为最小值和最大值。
grid-template-columns:minmax(200px,500px);
/* 宽度最小200px,最大500px*/
⑤auto：由浏览器决定长度
grid-template-columns:200px,auto,200px;
第一,三列为 200px，中间由浏览器决定长度
2.grid-row-gap :行间隙 grid-column-gap：列间隙 grid-gap ：行，列间隙
grid-row-gap :40px; 行间隙40px
grid-gap:40px; 列间隙40px,行间隙40px
grid-column-gap：40px; 列间隙40px
3.网格模板
grid-template-areas: 'header header header'
/* 第一行header独占一行，因为有三列，所以要写3个header */
'artical artical aside'
/* 第二行artical与aside宽为2:1 */
'box-1 box-2 box-3'
'footer footer footer';
4 . justify-content 项目在容器里面的水平位置
align-ittems 项目在容器里面的竖直位置
start ：对齐起始边框
end ：对齐结束边框
center : 居中
space-around , space-between , stretch和flex布局一样
5.跨行 跨列
grid-column-start ：左边框所在的垂直网格线
grid-column-end ：右边框所在的垂直网格线
grid-row-start ：上边框所在的水平网格线
grid-row-end ：下边框所在的水平网格线
