参考： 

最强大的 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;
}