1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>布局</title> 6 7 <style> 8 9 .box{ 10 11 display: grid; 12 13 grid-template-columns:150px 150px 150px; 14 15 grid-template-rows: 100px 100px 100px 100px; 16 17 } 18 19 .one{ 20 21 background: red; 22 23 grid-area: 1/1/2/4; 24 25 } 26 27 .two{ 28 29 background: orange; 30 31 grid-area: 2/1/5/2; 32 33 } 34 35 .three{ 36 37 background: blue; 38 39 grid-area: 2/2/3/3; 40 41 } 42 43 .four{ 44 45 background: pink; 46 47 grid-area: 3/2/4/3; 48 49 } 50 51 .five{ 52 53 background: yellow; 54 55 grid-area: 4/2/5/3; 56 57 } 58 59 .six{ 60 61 background: green; 62 63 grid-area: 2/3/5/4; 64 65 } 66 67 </style> 68 </head> 69 70 <body> 71 72 <div class="box"> 73 74 <div class="one">one</div> 75 76 <div class="two">two</div> 77 78 <div class="three">three</div> 79 80 <div class="four">four</div> 81 82 <div class="five">five</div> 83 84 <div class="six">six</div> 85 86 </div> 87 88 </body> 89 </html>
代码效果如下 ：
