Responsive Grid CSS Stylesheet

respo-grid.css

/* respo-grid v 2.0.1 */
/* created by davenchy */

.row { display: table; width: 100%; padding: 0; margin: 0; box-sizing: border-box; }
.row.center, .row .center { text-align: center; }
.flex { display: flex; }

.col { padding: 0; margin: 0; box-sizing: border-box; float: left; width: 100%; display: table-cell; }
.group .col { display: inline-block; flex: 1; }
.col.right { float: right; }

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

.flex .col.lg-1 { flex: 8.33%; }
.flex .col.lg-2 { flex: 16.66%; }
.flex .col.lg-3 { flex: 25%; }
.flex .col.lg-4 { flex: 33.33%; }
.flex .col.lg-5 { flex: 41.66%; }
.flex .col.lg-6 { flex: 50%; }
.flex .col.lg-7 { flex: 58.33%; }
.flex .col.lg-8 { flex: 66.66%; }
.flex .col.lg-9 { flex: 75%; }
.flex .col.lg-10 { flex: 83.33%; }
.flex .col.lg-11 { flex: 91.66%; }
.flex .col.lg-12 { flex: 100%; }

.flex .col.lg-w-1 { flex: 1; }
.flex .col.lg-w-2 { flex: 2; }
.flex .col.lg-w-3 { flex: 3; }
.flex .col.lg-w-4 { flex: 4; }
.flex .col.lg-w-5 { flex: 5; }
.flex .col.lg-w-6 { flex: 6; }
.flex .col.lg-w-7 { flex: 7; }
.flex .col.lg-w-8 { flex: 8; }
.flex .col.lg-w-9 { flex: 9; }
.flex .col.lg-w-10 { flex: 10; }
.flex .col.lg-w-11 { flex: 11; }
.flex .col.lg-w-12 { flex: 12; }

@media screen and (max-width: 1200px) {
    .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%; }

    .flex .col.md-1 { flex: 8.33%; }
    .flex .col.md-2 { flex: 16.66%; }
    .flex .col.md-3 { flex: 25%; }
    .flex .col.md-4 { flex: 33.33%; }
    .flex .col.md-5 { flex: 41.66%; }
    .flex .col.md-6 { flex: 50%; }
    .flex .col.md-7 { flex: 58.33%; }
    .flex .col.md-8 { flex: 66.66%; }
    .flex .col.md-9 { flex: 75%; }
    .flex .col.md-10 { flex: 83.33%; }
    .flex .col.md-11 { flex: 91.66%; }
    .flex .col.md-12 { flex: 100%; }

    .flex .col.md-w-1 { flex: 1; }
    .flex .col.md-w-2 { flex: 2; }
    .flex .col.md-w-3 { flex: 3; }
    .flex .col.md-w-4 { flex: 4; }
    .flex .col.md-w-5 { flex: 5; }
    .flex .col.md-w-6 { flex: 6; }
    .flex .col.md-w-7 { flex: 7; }
    .flex .col.md-w-8 { flex: 8; }
    .flex .col.md-w-9 { flex: 9; }
    .flex .col.md-w-10 { flex: 10; }
    .flex .col.md-w-11 { flex: 11; }
    .flex .col.md-w-12 { flex: 12; }
}

@media screen and (max-width: 700px) {
    .col.sm-1 { width: 8.33%; }
    .col.sm-2 { width: 16.66%; }
    .col.sm-3 { width: 25%; }
    .col.sm-4 { width: 33.33%; }
    .col.sm-5 { width: 41.66%; }
    .col.sm-6 { width: 50%; }
    .col.sm-7 { width: 58.33%; }
    .col.sm-8 { width: 66.66%; }
    .col.sm-9 { width: 75%; }
    .col.sm-10 { width: 83.33%; }
    .col.sm-11 { width: 91.66%; }
    .col.sm-12 { width: 100%; }

    .flex .col.sm-1 { flex: 8.33%; }
    .flex .col.sm-2 { flex: 16.66%; }
    .flex .col.sm-3 { flex: 25%; }
    .flex .col.sm-4 { flex: 33.33%; }
    .flex .col.sm-5 { flex: 41.66%; }
    .flex .col.sm-6 { flex: 50%; }
    .flex .col.sm-7 { flex: 58.33%; }
    .flex .col.sm-8 { flex: 66.66%; }
    .flex .col.sm-9 { flex: 75%; }
    .flex .col.sm-10 { flex: 83.33%; }
    .flex .col.sm-11 { flex: 91.66%; }
    .flex .col.sm-12 { flex: 100%; }

    .flex .col.sm-w-1 { flex: 1; }
    .flex .col.sm-w-2 { flex: 2; }
    .flex .col.sm-w-3 { flex: 3; }
    .flex .col.sm-w-4 { flex: 4; }
    .flex .col.sm-w-5 { flex: 5; }
    .flex .col.sm-w-6 { flex: 6; }
    .flex .col.sm-w-7 { flex: 7; }
    .flex .col.sm-w-8 { flex: 8; }
    .flex .col.sm-w-9 { flex: 9; }
    .flex .col.sm-w-10 { flex: 10; }
    .flex .col.sm-w-11 { flex: 11; }
    .flex .col.sm-w-12 { flex: 12; }
}

@media screen and (max-width: 300px) {
    .col.xs-1 { width: 8.33%; }
    .col.xs-2 { width: 16.66%; }
    .col.xs-3 { width: 25%; }
    .col.xs-4 { width: 33.33%; }
    .col.xs-5 { width: 41.66%; }
    .col.xs-6 { width: 50%; }
    .col.xs-7 { width: 58.33%; }
    .col.xs-8 { width: 66.66%; }
    .col.xs-9 { width: 75%; }
    .col.xs-10 { width: 83.33%; }
    .col.xs-11 { width: 91.66%; }
    .col.xs-12 { width: 100%; }

    .flex .col.xs-1 { flex: 8.33%; }
    .flex .col.xs-2 { flex: 16.66%; }
    .flex .col.xs-3 { flex: 25%; }
    .flex .col.xs-4 { flex: 33.33%; }
    .flex .col.xs-5 { flex: 41.66%; }
    .flex .col.xs-6 { flex: 50%; }
    .flex .col.xs-7 { flex: 58.33%; }
    .flex .col.xs-8 { flex: 66.66%; }
    .flex .col.xs-9 { flex: 75%; }
    .flex .col.xs-10 { flex: 83.33%; }
    .flex .col.xs-11 { flex: 91.66%; }
    .flex .col.xs-12 { flex: 100%; }

    .flex .col.xs-w-1 { flex: 1; }
    .flex .col.xs-w-2 { flex: 2; }
    .flex .col.xs-w-3 { flex: 3; }
    .flex .col.xs-w-4 { flex: 4; }
    .flex .col.xs-w-5 { flex: 5; }
    .flex .col.xs-w-6 { flex: 6; }
    .flex .col.xs-w-7 { flex: 7; }
    .flex .col.xs-w-8 { flex: 8; }
    .flex .col.xs-w-9 { flex: 9; }
    .flex .col.xs-w-10 { flex: 10; }
    .flex .col.xs-w-11 { flex: 11; }
    .flex .col.xs-w-12 { flex: 12; }
}