运用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>
原文：https://www.cnblogs.com/inkser/p/14315763.html