// ============================================================================= // Grid // =============================================================================

// Settings // =============================================================================

// Create widths for each column.

@mixin column-generator() {

@for $i from 1 through ($columns - 1) {
  &.with-#{$i}col {
    width: $one-column * $i;
  }
}

}

// Create offsets for columns.

@mixin offset-generator() {

@for $i from 1 through ($columns - 1) {
  &.with-#{$i}off {
    margin-left: $one-column * $i;
  }
}

}

// Reset column width to 100%. // Reset offsets to a margin-left of 0.

@mixin responsive-grid-generator() {

@for $i from 1 through ($columns - 1) {
  &.with-#{$i}col {
    width: 100%;
  }
  &.with-#{$i}off {
    margin-left: 0;
  }
}

}

// Component // =============================================================================

.grid {

display: block;
padding: 0;
margin: 0 $negative-gutter;
font-size: 0;
text-align: left;

}

// Descendants // =============================================================================

// Creates a grid cell. Add `with-co`l to define the number of coloms the // cell needs to span. Do not use 'with-col` if you wish to span the entire // width.

.grid-cell {

@include column-generator();
@include offset-generator();
display: inline-block;
width: 100%;
padding: 0 $gutter;
margin: 0;
font-size: $base-font-size;
text-align: left;
vertical-align: top;
&.is-centered {
  text-align: center;
}
&.is-right {
  text-align: right;
}
&.is-top {
  vertical-align: top;
}
&.is-middle {
  vertical-align: middle;
}
&.is-bottom {
  vertical-align: bottom;
}

}

// Centers your grid container with a max-width.

.grid-centered {

max-width: $max-width;
margin-right: auto;
margin-left: auto;

}

// Responsive // =============================================================================

@include breakpoint(small) {

.grid-cell {
  @include responsive-grid-generator();
}

}