Simple grid css with flex fallback

helpers-grid.scss

$cols: 12;
$gutter: 20px;

// flex fallback
.grid-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;

  [class*=col-] { box-sizing: border-box; }
}

@for $col from 1 through $cols {
  .col-#{$col} {
    $pw: percentage($col/$cols);
    width: calc(#{$pw} - #{$gutter - $gutter / $col });
  }
}

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

    > [class*=col-] { width: 100%; }
  }

  @for $col from 1 through $cols {
    .col-#{$col} { grid-column: span $col; }
  }
  
}

// multi row helpers for flex only
// place with .grid-columns where $col is number of cells in top row
// example - 4 cells - .grid-top-4
@for $col from 1 through $cols {
  .grid-top-#{$col} > [class*=col-]:nth-child(1n+#{$col + 1}) {
    margin-top: $gutter;
  }
}

// responsive - example - specify what you need following the naming pattern
@media screen and (max-width: 500px) {
  .col-max500-6 {
    grid-column: span 6;
    width: calc(50% - #{$gutter - $gutter / 2 });
  }
}

@media screen and (min-width: 500px) {
   .col-min500-6 {
     grid-column: span 6;
     width: calc(50% - #{$gutter - $gutter / 2 });
   }
}