Skip to content

Instantly share code, notes, and snippets.

@wolfthemes wolfthemes/grid.scss
Last active Jul 24, 2018

Embed
What would you like to do?
Ultra simple grid
// Column bottom margin and width on mobile when columns are stacked
.col{
width:100%;
margin-bottom:2em;
}
$gap : 35px; // space between columnd
$gutter : $gap / 2;
// Grid system for screen larger than 800px
@media screen and (min-width: 800px) {
.row{ // container
display:flex; // magic!
width: calc(100% + #{$gap} );
margin-left: -$gutter;
}
.col{
padding: 0 $gutter;
margin-bottom: 0;
}
// loop for 12 columns
@for $i from 1 through 12 {
.col-#{$i}{
width: ( $i * 100% / 12 ) ; // .col-6 will be 50% with etc...
}
}
} // end media query
/*
Like:
<div class="row">
<div class="col col-6">
My first half width column
</div>
<div class="col col-6">
My second half width column
</div>
</div>
and so on...
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.