<!DOCTYPE html>
<html>
<head>
<title>盒子作业</title>
<style type="text/css">
.wrapper{
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
}
.box1{
background: red;
grid-area: 1/1/2/4;
}
.box2{
background: green;
grid-area: 2/1/5/2;
}
.box3{
background: blue;
grid-area: 2/2/3/3;
}
.box4{
background: black;
grid-area: 3/2/4/3;
color: white;
}
.box5{
background: yellow;
grid-area: 4/2/5/3;
}
.box6{
background: pink;
grid-area: 2/3/5/4;
}
</style>
</head>
<body>
<div>
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
</html>
![]()