上面的效果怎么样通过grid实现呢？ 话不多说 上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
display: grid;
width: calc(5 * 60px);
height: calc(5 * 60px);
padding: 60px;
grid-template-rows: repeat(5, 60px);
grid-template-columns: repeat(5, 60px);
grid-template-areas: ". red red red . "
"yellow . . . . "
"green . black black . "
"green . . . blue "
". pink pink pink . ";
}
.red {
grid-area: red;
background: red;
}
.yellow {
grid-area: yellow;
background: yellow;
}
.green {
grid-area: green;
background: green;
}
.pink {
grid-area: pink;
background: pink;
}
.blue {
grid-area: blue;
background: blue;
}
.black {
grid-area: black;
background: black;
}
</style>
<body>
<div class="container">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="pink"></div>
<div class="blue"></div>
<div class="black"></div>
</div>
</body>
</html>