// grid and columns
$columns: 16 !default;
$gutter: 10px !default;

.grid {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  grid-gap: $gutter;

  .cell {
    @for $column from 1 through ($columns) {
      &.pos-#{$column} {
        grid-column-start: #{$column};
      }
      &.span-#{$column} {
        grid-column-end: span #{$column};
      }
    }
  }
}