_grids.scss

// Grids
// --------------------------------------------------

$grid-columns: 12;

.Grid {
  display: flex;
}
.Grid-inner {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  max-width: calc(100% + 40px);
  margin-right: -20px;
  margin-left: -20px;
}
.Grid-inner--hCenter {
  justify-content: center;
}
.Grid-inner--vCenter {
  align-items: center;
}
.Grid-cell {
  padding-right: 20px;
  padding-left: 20px;
}
.Grid-inner--noPadding {
  max-width: 100%;
  margin-right: 0;
  margin-left: 0;

  > .Grid-cell {
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin col($i, $n) {
  flex: 0 0 $i * 100 / $n * 1%;
  max-width: $i * 100 / $n * 1%;
}

@for $i from 1 through 12 {
  .Grid-cell--col#{$i} {
    @include col($i, 12);
  }
}