运用grid-template-areas:"";定位格子 制作
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- <meta http-equiv="refresh" content="3"> -->
<style type="text/css">
* {padding: 0;margin: 0;box-sizing: border-box;}
body {background-color: #777;}
.box {width: 150px;height: 900px;background-color: white;margin: 10px auto;}
.box div {width: 150px;height: 150px;border: 1px solid #c00;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);align-items: center;justify-items:center;grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9"
}
i {display: block;width: 30px;height: 30px;border-radius: 50%;background-color: #000;}
.box div:nth-child(1) i {grid-area: a5;}
.box div:nth-child(2) i {grid-area: a1;}
.box div:nth-child(2) i:last-child {grid-area: a9;}
.box div:nth-child(3) i:nth-child(1) {grid-area: a1;}
.box div:nth-child(3) i:nth-child(2) {grid-area: a5;}
.box div:nth-child(3) i:nth-child(3) {grid-area: a9;}
.box div:nth-child(4) i:nth-child(1) {grid-area: a1;}
.box div:nth-child(4) i:nth-child(2) {grid-area: a3;}
.box div:nth-child(4) i:nth-child(3) {grid-area: a7;}
.box div:nth-child(4) i:nth-child(4) {grid-area: a9;}
.box div:nth-child(5) i:nth-child(1) {grid-area: a1;}
.box div:nth-child(5) i:nth-child(2) {grid-area: a3;}
.box div:nth-child(5) i:nth-child(3) {grid-area: a5;}
.box div:nth-child(5) i:nth-child(4) {grid-area: a7;}
.box div:nth-child(5) i:nth-child(5) {grid-area: a9;}
.box div:nth-child(6) i:nth-child(1) {grid-area: a1;}
.box div:nth-child(6) i:nth-child(2) {grid-area: a3;}
.box div:nth-child(6) i:nth-child(3) {grid-area: a4;}
.box div:nth-child(6) i:nth-child(4) {grid-area: a6;}
.box div:nth-child(6) i:nth-child(5) {grid-area: a7;}
.box div:nth-child(6) i:nth-child(6) {grid-area: a9;}
</style>
</head>
<body>
<div class="box">
<div>
<i></i>
</div>
<div>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</body>
</html>