Last Updated: December 26, 2018
·
1.575K
· devers

Use semantic, responsive css grids!

Semantic.gs [http://semantic.gs/] is a great css grid system with support for LESS, SCSS, and Stylus

I prefer 24 columns (and SCSS), but 12 works just as well

$column-width: 30;
$gutter-width: 10;
$columns: 24;
$total-width: 100%;

header {

    @include column(24);

}

#menu {

    @include column(8);

}

#content {

    @include column(16);

}

@media only screen and (max-width:959px) {
    #content, #menu {

        @include column(24);

    }

}