效果图如上所示
<!DOCTYPE html> <html> <head> <title>练习</title> </head> <body> <link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C"> <div class="container"> <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>
.container{ display: grid; grid-template-columns: 60px 60px 60px; grid-auto-rows: 60px 60px 60px 60px; background: pink; color: purple; } .one{ grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; grid-column-end: 4; background: orange; } .two{ grid-column-start: 1; grid-row-start: 2; grid-column-end: 2; grid-row-end: 5; background: green; } .three{ grid-column-start: 2; grid-row-start: 2; grid-column-end: 3; grid-row-end: 3; background: black; } .four{ grid-column-start: 2; grid-row-start: 3; grid-row-end: 4; grid-column-end: 3; background: yellow; } .five{ grid-column-start: 2; grid-row-start: 4; grid-column-end: 3; grid-row-end: 5; background: red; } .six{ grid-column-start: 3; grid-row-start: 2; grid-column-end: 4; grid-row-end: 5; background:blue; }