2.grid布局 · html-css

[grid布局完整指南](https://blog.csdn.net/lhjuejiang/article/details/80001592) ~~~ <style> .container{ height:500px; width: 1000px; background: pink; margin-left: auto; margin-right: auto; } .list{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 300px 300px; } .list>div{ border:1px solid #333; margin-left: -1px; } </style> <body> <div class="container"> <div class="list"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> ~~~ ~~~ 使用display：grid把容器元素定义为一个网格，使用grid-template-columns和grid-template-rows设置列和行大小 ~~~