<div class="container">
    <div style="background:#f002">
        The basic <code>.grid.-container</code> blah blah.
    </div>
</div>

<div class="container -columns-12">
    <div class="cell -span-6 -left" style="background:#00f2">.-span-6</div>
    <div class="cell -span-6 -center" style="background:#00f2">.-center-6</div>
    <div class="cell -span-6 -right" style="background:#00f2">.-last-6</div>
</div>

.container {
  --columns: 1;
  --gap: var(--root-gap, 16px);
  --container-width: 320px;

  display: grid;
  gap: var(--gap);
  grid: auto /
    [wide-start]
      1fr
    [main-start]
      repeat(var(--columns), minmax(0, calc((var(--container-width) - (var(--columns) - 1) * var(--gap)) / var(--columns))))
    [main-end]
      1fr
    [wide-end];

  @for $i from 2 through 12 {
    &.-columns-#{$i} {
      --columns: #{$i};
    }
  }

  > * {
    grid-column: main / main;
  }

  /* should be max mobile columns + tablet outer gutters */
  @media (min-width: 368px) {
    --container-width: 744px;
  }

  /* should be max tablet columns + desktop outer gutters */
  @media (min-width: 808px) {
    --container-width: 1300px;
  }
}