_grid.scss

_grid

$width-Container: 1200px;
$gutter-Row: 15px;

.Container {
  max-width: $width-Container + $gutter-Row * 2;
  margin-right: auto;
  margin-left: auto;
  padding-right: $gutter-Row;
  padding-left: $gutter-Row;
}

.Row {
  display: block;
  font-size: 0;
  text-align: left;

  &#{--center} {
    text-align: center;
  }
  &#{--right} {
    text-align: right;
  }
  &#{--widthGutter} {
    margin-right: -$gutter-Row;
    margin-left: -$gutter-Row;
  }
}

.Cell {
  display: inline-block;
  font-size: 1rem;
  text-align: left;
  width: 100%;
  vertical-align: top;

  .Row--widthGutter & {
    padding-right: $gutter-Row;
    padding-left: $gutter-Row;
  }

  &#{--Center} {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@for $i from 1 through 12 {
  @for $j from 1 through 12 {
    @if $i < $j {
      .u-#{$i}of#{$j} {
        width: 100% * $i / $j !important;
      }
    }
  }
}