自用的栅格布局模板

效果1

html

    <div class="grid-container outline">
        <div class="row">
            <div class="col-1"><p>col-3</p></div> 
            <div class="col-2">
                <div class="col-3"></div>
                <div class="col-4"></div>
            </div> 
        </div>  
    </div>

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

    <div class="grid-container outline">
        <div class="row">
            <div class="col-5"><p>col-5</p></div> 
            <div class="col-6"><p>col-6</p></div> 
            <div class="col-5"><p>col-5</p></div> 
            <div class="col-6"><p>col-6</p></div> 
            <div class="col-5"><p>col-5</p></div> 
        </div> 
    </div>

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;}