Responsive 12 Column Grid

Responsive Grid

.grid-1 { width:60px; }
.grid-2 { width:140px; }
.grid-3 { width:220px; }
.grid-4 { width:300px; }
.grid-5 { width:380px; }
.grid-6 { width:460px; }
.grid-7 { width:540px; }
.grid-8 { width:620px; }
.grid-9 { width:700px; }
.grid-10 { width:780px; }
.grid-11 { width:860px; }
.grid-12 { width:940px; }

.col {
    margin: 0 10px;
    float: left;
    display: inline;
}
.row {
    width: 960px;
    margin: 0 auto;
}
.row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
}

.row:after {
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .grid-1 { width:44px; }
    .grid-2 { width:108px; }
    .grid-3 { width:172px; }
    .grid-4 { width:236px; }
    .grid-5 { width:300px; }
    .grid-6 { width:364px; }
    .grid-7 { width:428px; }
    .grid-8 { width:492px; }
    .grid-9 { width:556px; }
    .grid-10 { width:620px; }
    .grid-11 { width:684px; }
    .grid-12 { width:748px; }

    .row { width: 768px; }
}

@media only screen and (max-width: 767px) {
    .grid-3,.grid-4,.grid-6,.grid-8,.grid-12 { width:300px; }
    .row { width:320px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .grid-3,.grid-6 {width:210px;}
    .grid-4,.grid-8,.grid-12 { width:440px; }
    .row { width:460px; }
}