.wrapper { /*包装类*/
display: grid; /*属性:网格*/
grid-template-columns: repeat(3, 1fr); /*属性允许指定网格中的列数及列的宽度。repeat的作用减少重复书写。fr是一个自适应单位,用于在一系列长度值中分配剩余空间。3代表重复3次,1fr是网格容器被分成1行。*/
grid-gap: 10px; /*网格线和列之间的距离为10像素*/
grid-auto-rows: minmax(100px, auto);/*创建出的行保持最小距离,为100像素。最大值是suto,它是自动定位。*/
}
.one { /*第一个*/
grid-column: 1 / 3; /从第一条网格线开始,到第3条网格线结束*/
grid-row: 1; /*只在第一行*/
}
.two { /*第二个*/
grid-column: 2 / 4; /*从第二条网格线开始,到第4条网格线结束*/
grid-row: 1 / 3; /*从第一行到第三行*/
}
.three { /*第三个*/
grid-column: 1; /*从第一条网格线开始*/
grid-row: 2 / 5; /*从第二行到第五行*/
}
.four { /*第四个*/
grid-column: 3; /*从第三条网格线开始*/
grid-row: 3; /*只在第三行*/
}
.five { /*第五个*/
grid-column: 2;/*从第二条网格线开始*/
grid-row: 4; /*只在第四行*/
}
.six { /*第六个*/
grid-column: 3;/*从第三条网线开始*/
grid-row: 4; /*只在第四行*/
}