1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .container{ 8 display:grid; 9 grid-template-columns: 40px 50px auto 50px 40px; 10 grid-template-rows: 25% 100px auto; 11 } 12 .container .box1{ 13 background: #f00; 14 } 15 .container .box2{ 16 background: #0f0; 17 } 18 .container .box3{ 19 background: #00f; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="container"> 25 <div class="box1">区域1</div> 26 <div class="box1">区域2</div> 27 <div class="box1">区域3</div> 28 <div class="box1">区域4</div> 29 <div class="box1">区域5</div> 30 </div> 31 </body> 32 </html>
grid布局：所有设置都是在父级元素内设置。设置父级元素display:grid,设置grid-template-columns来设置行显示，设置grid-template-rows来设置列显示。
grid-template-columns设置每个块级所占的宽度
grid-template-rows设置每个会计所占的高度