grid.scss

// 
// Grid
// 
// Uses https://thingsym.github.io/flexbox-grid-mixins/
// 

// override these in your own variables
$grid-column-count: 12 !default;
$grid-gutter: 2.5% !default;
$grid-activation-breakpoint: "min-width: 960px" !default;

@media ($grid-activation-breakpoint) {

  // basic grid
  .grid {
    @include grid(
      $flex-wrap: wrap,
      $align-items: flex-start
    );
  }

  // grid that centers things
  .grid-center {
    @include grid(
      $align-items: center,
      $justify-content: center
    );
  }

  // grid that stretches things
  .grid-stretch {
    @include grid($align-items: stretch);
  }

  // setup the grid namespacing and cols
  @for $i from 1 through 12 {
    .grid__col-#{$i} {
      @include grid-col(
        $col: $i,
        $grid-columns: $grid-column-count,
        $condensed: true,
        $gutter: $grid-gutter
      );
    }
  }

}