css basic grid

style.css

/* --------------------------------------------
basic float grid
-------------------------------------------- */

.row {
    margin-left: -15px;
    margin-right: -15px;
}

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

[class*="col-"] {
    padding: 0 15px;
    float: left;
    min-height: 1px;
}

.col-1 {
    width: 8.33%;
}

.col-2 {
    width: 16.66%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33%;
}

.col-5 {
    width: 41.66%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33%;
}

.col-8 {
    width: 66.66%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33%;
}

.col-11 {
    width: 91.66%;
}

.col-12 {
    width: 100%;
}


/* offsets */

.col-offset-1 {
    margin-left: 8.33%;
}

.col-offset-2 {
    margin-left: 16.66%;
}

.col-offset-3 {
    margin-left: 25%;
}

.col-offset-4 {
    margin-left: 33.33%;
}

.col-offset-5 {
    margin-left: 41.66%;
}

.col-offset-6 {
    margin-left: 50%;
}

.col-offset-7 {
    margin-left: 58.33%;
}

.col-offset-8 {
    margin-left: 66.66%;
}

.col-offset-9 {
    margin-left: 75%;
}

.col-offset-10 {
    margin-left: 83.33%;
}

.col-offset-11 {
    margin-left: 91.66%;
}

.col-offset-12 {
    margin-left: 100%;
}


/* sm: 767px, */

@media only screen and (max-width: 767px) {
    [class*="col-"],
    [class="full-sm"] {
        width: 100%;
        float: none;
    }
    [class*="col-offset"] {
        margin-left: 0;
    }
}


/* sm: 767px, */


/* md: 991px, */

@media only screen and (max-width: 991px) {
    [class*="full-md"] {
        width: 100%;
    }
    [class*="full-offset-md"] {
        margin-left: 0;
    }
}


/* md: 991px, */


/* lg: 1170px, */

@media only screen and (max-width: 1170px) {
    [class*="full-lg"] {
        width: 100%;
    }
    [class*="full-offset-lg"] {
        margin-left: 0;
    }
}


/* lg: 1170px, */


/* --------------------------------------------
basic flex grid
-------------------------------------------- */

.container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
    width: 100%;
}

.row {
    margin-left: -15px;
    margin-right: -15px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-1 {
    width: 8.33%;
    max-width: 8.33%;
    -webkit-flex: 8.33%;
    -moz-flex: 8.33%;
    -ms-flex: 8.33%;
    -o-flex: 8.33%;
    flex: 8.33%;
}

.col-2 {
    width: 16.66%;
    max-width: 16.66%;
    -webkit-flex: 16.66%;
    -moz-flex: 16.66%;
    -ms-flex: 16.66%;
    -o-flex: 16.66%;
    flex: 16.66%;
}

.col-3 {
    width: 25%;
    max-width: 25%;
    -webkit-flex: 25%;
    -moz-flex: 25%;
    -ms-flex: 25%;
    -o-flex: 25%;
    flex: 25%;
}

.col-4 {
    width: 33.33%;
    max-width: 33.33%;
    -webkit-flex: 33.33%;
    -moz-flex: 33.33%;
    -ms-flex: 33.33%;
    -o-flex: 33.33%;
    flex: 33.33%;
}

.col-5 {
    width: 41.66%;
    max-width: 41.66%;
    -webkit-flex: 41.66%;
    -moz-flex: 41.66%;
    -ms-flex: 41.66%;
    -o-flex: 41.66%;
    flex: 41.66%;
}

.col-6 {
    width: 50%;
    max-width: 50%;
    -webkit-flex: 50%;
    -moz-flex: 50%;
    -ms-flex: 50%;
    -o-flex: 50%;
    flex: 50%;
}

.col-7 {
    width: 58.33%;
    max-width: 58.33%;
    -webkit-flex: 58.33%;
    -moz-flex: 58.33%;
    -ms-flex: 58.33%;
    -o-flex: 58.33%;
    flex: 58.33%;
}

.col-8 {
    width: 66.66%;
    max-width: 66.66%;
    -webkit-flex: 66.66%;
    -moz-flex: 66.66%;
    -ms-flex: 66.66%;
    -o-flex: 66.66%;
    flex: 66.66%;
}

.col-9 {
    width: 75%;
    max-width: 75%;
    -webkit-flex: 75%;
    -moz-flex: 75%;
    -ms-flex: 75%;
    -o-flex: 75%;
    flex: 75%;
}

.col-10 {
    width: 83.33%;
    max-width: 83.33%;
    -webkit-flex: 83.33%;
    -moz-flex: 83.33%;
    -ms-flex: 83.33%;
    -o-flex: 83.33%;
    flex: 83.33%;
}

.col-11 {
    width: 91.66%;
    max-width: 91.66%;
    -webkit-flex: 91.66%;
    -moz-flex: 91.66%;
    -ms-flex: 91.66%;
    -o-flex: 91.66%;
    flex: 91.66%;
}

.col-12 {
    width: 100%;
    max-width: 100%;
    -webkit-flex: 100%;
    -moz-flex: 100%;
    -ms-flex: 100%;
    -o-flex: 100%;
    flex: 100%;
}

.col-offset-1 {
    margin-left: 8.33%;
}

.col-offset-2 {
    margin-left: 16.66%;
}

.col-offset-3 {
    margin-left: 25%;
}

.col-offset-4 {
    margin-left: 33.33%;
}

.col-offset-5 {
    margin-left: 41.66%;
}

.col-offset-6 {
    margin-left: 50%;
}

.col-offset-7 {
    margin-left: 58.33%;
}

.col-offset-8 {
    margin-left: 66.66%;
}

.col-offset-9 {
    margin-left: 75%;
}

.col-offset-10 {
    margin-left: 83.33%;
}

.col-offset-11 {
    margin-left: 91.66%;
}

.col-offset-12 {
    margin-left: 100%;
}