codeforamerica/michigan-benefits

.grid {
  @include outer-container();
  max-width: $site-max-width;

  @include media($tablet-up) {
    // Defines width of element
    .width-one-whole {
      @include span-columns(12);
    }
    .width-one-half {
      @include span-columns(6);
    }
    .width-one-third {
      @include span-columns(4);
    }
    .width-two-thirds {
      @include span-columns(8);
    }
    .width-one-fourth {
      @include span-columns(3);
    }
    .width-three-fourths {
      @include span-columns(9);
    }
    .width-one-sixth {
      @include span-columns(2);
    }
    .width-five-sixths {
      @include span-columns(10);
    }
    .width-one-twelfth {
      @include span-columns(1);
    }
    .width-five-twelfths {
      @include span-columns(5);
    }
    .width-seven-twelfths {
      @include span-columns(7);
    }
    .width-eleven-twelfths {
      @include span-columns(11);
    }

    // Shift Classes (adds white space to the left of grid item)
    .shift-one-half {
      @include shift(6);
    }
    .shift-one-third {
      @include shift(4);
    }
    .shift-two-thirds {
      @include shift(8);
    }
    .shift-one-fourth {
      @include shift(3);
    }
    .shift-three-fourths {
      @include shift(9);
    }
    .shift-one-sixth {
      @include shift(2);
    }
    .shift-five-sixths {
      @include shift(10);
    }
    .shift-one-twelfth {
      @include shift(1);
    }
    .shift-five-twelfths {
      @include shift(5);
    }
    .shift-seven-twelfths {
      @include shift(7);
    }
    .shift-eleven-twelfths {
      @include shift(11);
    }

    // Specificies end of a row.
    // Required if grid-box contains multiple rows.
    // Required if browser does not support :last-child
    .end-row {
      @include omega();
    }

    // Fixes grid alignment when grid__items have varying heights.
    .end-row + .grid__item {
      clear: left;
    }
  }
}