html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>四盒子</title>
<link rel="stylesheet" href=".作业3.css"/>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
css:
.wrapper {
display: grid;/*创建网格容器*/
grid-template-columns: repeat(3, 1fr);/*设置一个网格的每列的列宽，repeat允许重复创建网格轨道，第一个参数表示重复轨道次数，第二个参数表示轨道尺寸*/
grid-gap: 10px;/*网格行列之间的间距*/
grid-auto-rows: minmax(100px, auto);/*设置一个网格的每行的高度，minmax创建网格的最小和最大尺寸，auto允许根据内容进行拉伸或挤压*/
}
.one {
grid-column: 1 / 3;/*第一根行网格线开始列为1，结束列为3*/
grid-row: 1;/*第一根列网格线开始行为1*/
}
.two {
grid-column: 2 / 4;/*第二根行网格线开始列为2，结束列为4*/
grid-row: 1 / 3;/*第二根列网格线开始行为1，结束行为3*/
}
.three {
grid-column: 1;/*第三根行网格线开始列为1*/
grid-row: 2 / 5;/*第一根列网格线开始行为2，结束行为5*/
}
.four {
grid-column: 3;/*第四根行网格线开始列为3*/
grid-row: 3;/*第四根列网格线开始行为3*/
}
.five {
grid-column: 2;/*第五根行网格线开始列为2*/
grid-row: 4;/*第五根列网格线开始行为4*/
}
.six {
grid-column: 3;/*第六根行网格线开始列为3*/
grid-row: 4;/*第六根列网格线开始行为4*/
}