SCSS Grid Component

_grid.scss

$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});
      }
    }
  }
}

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>

@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?

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