CSS自定义响应式网格

CSS

html,body{
    margin:0;
    padding:0;
    width:100%;    
}

.grid-container{ /*响应式网格的容器*/
    width:100%;    
}

/*清除行前行后的浮动，使它能完全包含浮动的子元素*/
.row:before,.row:after{
    content:"";
    display:table;    
    clear:both;
}

/*分辨率宽度大于等于1200px*/
@media all and (min-width:1200px){
    [class*="col-lg-"]{ /* 在分辨率宽度大于等于1200px时才会有col-lg-*这组类 */
        padding:10px;
        height:70px;
        min-height:1px;/*为了避免空列高度为0发生重叠，给一个最小高度*/
        display:block;
        float:left;
        width:8.33%; /*分为12列，给一个基础比例宽度*/
        box-sizing:border-box; /*border和padding占width和height的空间*/
    }
    [class*="col-lg-"]>[class="col-container"]{ /*大屏幕下类col-container的样式*/
        width:100%;
        height:100%;
        background:#eee;
        outline:1px solid #999;    /*outline不占空间，就好像脱离了文档流一样*/
    }
    /*不同列数占的比例宽度*/
    .col-lg-1{ width:8.33%; }
    .col-lg-2{ width:16.66%; }
    .col-lg-3{ width:25%; }
    .col-lg-4{ width:33.33%; }
    .col-lg-5{ width:41.66%; }
    .col-lg-6{ width:50%; }
    .col-lg-7{ width:58.33%; }
    .col-lg-8{ width:66.66%; }
    .col-lg-9{ width:75%; }
    .col-lg-10{ width:83.33%; }
    .col-lg-11{ width:91.66%; }
    .col-lg-12{ width:100%; }
}

/*分辨率宽度大于等于768px小于等于1200px*/
@media all and (min-width:768px) and (max-width:1200px){
    [class*="col-md-"]{ /*只有在中等屏幕下才有col-md-*这组类*/
        padding:10px;
        height:70px;
        min-height:1px;
        display:block;
        float:left;
        width:8.33%;
        box-sizing:border-box;
    }
    [class*="col-md-"]>[class="col-container"]{ /*中等屏幕下类col-container的样式*/
        width:100%;
        height:100%;
        background:#eee;    
        outline:1px solid #999;    
    }
    .col-md-1{ width:8.33%; }
    .col-md-2{ width:16.66%; }
    .col-md-3{ width:25%; }
    .col-md-4{ width:33.33%; }
    .col-md-5{ width:41.66%; }
    .col-md-6{ width:50%; }
    .col-md-7{ width:58.33%; }
    .col-md-8{ width:66.66%; }
    .col-md-9{ width:75%; }
    .col-md-10{ width:83.33%; }
    .col-md-11{ width:91.66%; }
    .col-md-12{ width:100%; }    
}

HTML

    <div class="grid-container">
        <div class="row">
            <div class="col-lg-4 col-md-6"><div class="col-container"></div></div>
            <div class="col-lg-4 col-md-6"><div class="col-container"></div></div>
            <div class="col-lg-4"><div class="col-container"></div></div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-12"><div class="col-container"></div></div>
            <div class="col-lg-6"><div class="col-container"></div></div>
            <div class="col-lg-3"><div class="col-container"></div></div>
        </div>
        <div class="row">
            <div class="col-lg-1 col-md-3"><div class="col-container"></div></div>
            <div class="col-lg-1 col-md-6"><div class="col-container"></div></div>
            <div class="col-lg-2 col-md-3"><div class="col-container"></div></div>
            <div class="col-lg-2"><div class="col-container"></div></div>
            <div class="col-lg-6"><div class="col-container"></div></div>
        </div>
        <div class="row">
            <div class="col-md-2"><div class="col-container"></div></div>
            <div class="col-md-2"><div class="col-container"></div></div>
            <div class="col-md-8"><div class="col-container"></div></div>
        </div>
        <div class="row">
            <div class="col-md-3"><div class="col-container"></div></div>
            <div class="col-md-3"><div class="col-container"></div></div>
        </div>
    </div>

大屏幕（这里指分辨率宽度大于等于1200px）的效果

小屏幕（这里指分辨率宽度大于等于768px小于等于1200px）的效果