Skip to content

Instantly share code, notes, and snippets.

@ozziexsh
Last active September 8, 2017 11:45
Show Gist options
  • Save ozziexsh/dff51632618fa1eb2153 to your computer and use it in GitHub Desktop.
Save ozziexsh/dff51632618fa1eb2153 to your computer and use it in GitHub Desktop.
SCSS Grid Component
$columns: 12;
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px
);
$container-max-widths: (
sm: 576px,
md: 720px,
lg: 940px,
xl: 1140px
);
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.row::before,
.row::after {
display: table;
content: " ";
clear: both;
}
.column, .columns {
position: relative;
float: left;
}
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
@each $breakpoint, $width in $grid-breakpoints {
@media(min-width: $width) {
@if map-has-key($container-max-widths, $breakpoint) {
.container {
max-width: map-get($container-max-widths, $breakpoint);
}
}
@for $x from 1 through $columns {
.#{$breakpoint}-#{$x} {
width: calc(100% / #{$columns} * #{$x});
}
.#{$breakpoint}-offset-#{$x} {
margin-left: calc(100% / #{$columns} * #{$x});
}
}
}
}
@ozziexsh
Copy link
Author

Very similar to bootstraps grid system.

example layout

<div class="container">
  <div class="row">
    <div class="column xs-12 sm-6"></div>
    <div class="column xs-12 sm-6"></div>
  </div>
</div>

@pqt
Copy link

pqt commented Apr 24, 2016

@Nehero

width: calc(100% / 12 * #{$x});

margin-left: calc(100% / 12 * #{$x});

Should the 12 not be pulling from the variable set at the top?

@ozziexsh
Copy link
Author

@austinpaquette nice catch. I'll update it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment