.wrapper {/*会对wrapper里面所有的单位起作用*/
/* (.wrapper)表示包装类,q其中.的意思是class=wrapper */
display: grid;/*定义表格*/
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;/*定义方块之间的缺口大小*/
grid-auto-rows: minmax(100px, auto);/**定义方块的大小*/
}
.one {/*定义表格的长,高,背景颜色*/
grid-column: 1 / 3;/*分数表示所占用的一个屏幕的百分比1/3表示所占屏宽*//*排*/
grid-row: 1;/*列*/
background-color: blue;
}
.two { /*定义表格的长,高,背景颜色*/
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: aliceblue;
}
.three {/*定义表格的长,高,背景颜色*/
grid-column: 1;
grid-row: 2 / 5;
background-color: aqua;
}
.four {/*定义表格的长,高,背景颜色*/
grid-column: 3;
grid-row: 3;
background-color: chocolate;
}
.five {/*定义表格的长,高,背景颜色*/
grid-column: 2;
grid-row: 4;
background-color: darkgray;
}
.six {/*定义表格的长,高,背景颜色*/
grid-column: 3;
grid-row: 4;
background-color: darkseagreen;
}