Grid布局

        //IE浏览器不支持

 .wrapper {
             /* grid只是将wrapper元素变成一个grid（网格） */
             display: grid;
             /* 使用grid-template-columns，rid-template-rows定义行和列 */
             grid-template-columns: 100px 100px 100px;
             grid-template-rows:100px 100px 100px;
             margin: 100px 150px auto;

         }
         .wrapper div{
             border: 1px solid #ccc;
         }
         .item1 {
             /* item1占据从第一条网格开始，到第四条网格结束 */
             /* grid-column-start: 1;
             grid-column-end: 4; */
            /*面两句的缩写语法*/
             grid-column: 1/4;
         }
         .item1 {  background: green; } .item2 {  background: orange; } .item3{  background: gray; }.item4 {  background: gold; }

        .item5 {  background: purple; } .item6{  background: yellow; }

      效果图如下：

 

      
<div class="wrapper">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    
</div>