Skip to content

Instantly share code, notes, and snippets.

@adam-weber

adam-weber/column-grid.scss

Last active March 14, 2019 19:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adam-weber/6f82fbd9894f5e601881c21414986484 to your computer and use it in GitHub Desktop.
Save adam-weber/6f82fbd9894f5e601881c21414986484 to your computer and use it in GitHub Desktop.
Download ZIP
12 Column CSS Grid in 10 lines
Raw
column-grid.scss
.row {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
@for $i from 1 through 12 {
.row > div.column-#{$i} {
width: ($i/12)*100%;
}
}
Raw
index.html
<div class="row">
<div class="column-6">
I take up half the page horizontally.
</div>
<div class="column-6">
I also take up half of the page.
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment