Skip to content

Instantly share code, notes, and snippets.

@wolfthemes
Last active July 24, 2018 12:39
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save wolfthemes/1ee6cb56e58c206a333fa3c13380ecc4 to your computer and use it in GitHub Desktop.
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