自用的栅格布局模板

效果1

html

    

        

            
col-3
 
            

                

                

            
 
        
  
    

css

        /* 容器 */
        .grid-container{
            width: 100%; 
            max-width: 1600px;
            /* box-sizing: border-box;       */
        }
        /* 清楚浮动 */
        .row:before, 
        .row:after {
            content:"";
            display: table ;
            clear:both;
        }
        /* 盒子的基础样式 */
        [class*='col-'] {
            float: left;
            min-height: 1px;
            height: 400px;
            width: 16.66%;
            box-sizing: border-box;
        }
        .col-1{ width: 50%; background-color: blue;}
        .col-2{ width: 50%; background-color: pink; padding: 15px; box-sizing: border-box}
        .col-3{ width: 100%; height: 44%; margin: 0 0 2%; background-color: green;}
        .col-4{ width: 100%; height: 44%; margin: 2% 0 0; background-color: #00FFFF;}

效果2

html

    

        

            
col-5
 
            
col-6
 
            
col-5
 
            
col-6
 
            
col-5
 
        
 
    

css

        /* 容器 */
        .grid-container{
            width: 100%; 
            max-width: 1600px;
            /* box-sizing: border-box;       */
        }
        /* 清楚浮动 */
        .row:before, 
        .row:after {
            content:"";
            display: table ;
            clear:both;
        }
        /* 盒子的基础样式 */
        [class*='col-'] {
            float: left;
            min-height: 1px;
            height: 400px;
            width: 16.66%;
            box-sizing: border-box;
        }
        .col-5{ width: 20%; height: 60px; text-align: center; background-color: blue; margin-top: 15px;}
        .col-6{ width: 20%; height: 60px; text-align: center; background-color: pink; margin-top: 15px;}