参考：
最强大的 CSS 布局 —— Grid 布局_css grid-CSDN博客
将display属性设置为grid,代表此容器内是网格布局。
.parent-box{margin: 60rpx;display: grid;....}1. 容器属性
1.1 grid-template-columns 列宽设置
grid-template-columns：列宽，第几个值代表第几列，同时也说明了列数
1.1.1 直接设置列宽数值
如下：代表有三列，依次列宽是100rpx 100rpx 200rpx，
grid-template-columns: 100rpx 100rpx 200rpx;
1.1.2 auto 自适应
根据空间自适应，属于有多少空间占多少
grid-template-columns: 100rpx 100rpx auto;
1.1.3 minmax 范围设置
设置某列的宽度最小值、最大值
grid-template-columns: 100rpx 100rpx minmax(100rpx,500rpx);
1.1.4 关键词fr 等份比例
1fr 相当于1等份 ，如下，相当于将空间分为三份，每个item占据一份
grid-template-columns: 1fr 1fr 1fr;
也可以如下，第二列宽设为200rpx，剩余空间分为三份，第一列占据一份，第三列占两份
grid-template-columns: 1fr 200rpx 2fr;
1.1.5 repeat 函数 重复几次值
grid-template-columns: repeat(3,150rpx);
1.1.6 auto-fill 自动填充
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格
grid-template-columns: repeat(auto-fill,150rpx); 
1.2 grid-template-rows 行高设置
grid-template-rows 与列宽设置用法相似，如下是设置第一行和第二行的行高是100rpx,如果只设置一个值，代表第一行的值，其他行的行高，则是默认值
grid-template-rows: 100rpx 100rpx; 1.3 间距
1.3.1 column-gap 列间距
column-gap: 10rpx;1.3.2. row-gap 行间距
row-gap: 20rpx;1.3.3 gap 行、列间距设置
此用法相当于row-gap行间距和column-gap列间距的简写，如果只设置一个值，代表行间距和列间距都是此值。
/*行间距 20rpx 列间距 10rpx*/gap: 20rpx 10rpx;
1.4 设置行高、列宽的默认大小
1.4.1 grid-auto-columns 设置列宽默认大小
.parent-box{margin: 60rpx;display: grid;grid-template-columns: repeat(2,180rpx);grid-template-rows: repeat(3,100rpx);/* 指定自动布局按照‘列’排列 */grid-auto-flow: column;gap: 10rpx;/* 设置默认列高 */grid-auto-columns: 100rpx;
}
1.4.2 grid-auto-rows 设置行高默认大小
以下例子，只设置了前三行的行高为50rpx，第四行并没指定，所以第四行的行高为默认行高100rpx
.parent-box{margin: 60rpx;display: grid;grid-template-columns: repeat(auto-fill,180rpx);grid-template-rows: repeat(3,50rpx);gap: 10rpx;/* 设置默认行高 */grid-auto-rows: 100rpx;
} 
4.5 grid-auto-flow 自动布局的排列方式
grid-auto-flow: row|column|dense|row dense|column dense;| 值 | 描述 |
|---|---|
| row | 默认值。 通过填充每一行来放置网格元素，在必要时增加新列。 |
| column | 通过填充每一列来放置网格元素，在必要时增加新列。 |
| dense | 该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。 |
| row dense | 按行来填充网格中前面留下的空白 |
| column dense | 按列来填充网格中前面留下的空白 |
4.6 grid-template-areas 定义区域
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成。与项属性grid-area 结合使用。其中 " ."符号代表空单元格。
.parent-box{margin: 60rpx;display: grid;grid-template-columns: repeat(4,100rpx);gap: 10rpx;grid-auto-rows: 100rpx;grid-template-areas: ". item1 item1 item2""item3 item4 item5 item6 ";}
.item{text-align: center;color: #fff;background-color: lightskyblue;line-height: 100rpx;
}
.item1{grid-area: item1;background-color: lightblue;
}...
2. 项目属性
2.1 根据网格线设置项目位置及占位
网格线的正方向的编号如下，反方向的编号需加负号（-），m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。
示例1：以4列2行的坐标为例，如果设置块1占据水平方向的网格线1到3，垂直方向的网格线1到2，块3占据水平方向的网格线3到5，垂直方向的网格线1到2，按照顺序块2应该被覆盖掉了，但是没有，它被挤下去了，如下图
.item1{background-color: lightblue;grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;
}
.item2{background-color: lightcoral;
}
.item3{background-color: lightpink;grid-column-start: 3;grid-column-end: 5;grid-row-start: 1;
}
示例2：在示例1的基础上，想让块2和块3叠加到一起，可以指定块2的网格线就可以实现：
.item2{z-index: 2;background-color: lightcoral;grid-column-start: 3;grid-column-end: 4;grid-row-start: 1;
}
