Create the simplest grid possible using CSS Grid syntax

SassGrid.scss

// Create the simplest grid possible using CSS Grid syntax
// Customize your grid with custom number of items, classnames, and gaps
//
// Example HTML
//    <div class="row row-3">
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//      <div class="col-1"></div>
//    </div>
$SassGrid: (  
  numberOfColumns: 10,
  rowClassName: 'row',
  colClassName: 'col',
  gridGap: 1em,
);

.#{map-get($SassGrid, rowClassName)} {
  display: grid;
  grid-template-rows: auto;
  grid-gap: map-get($SassGrid, gridGap);      
}

@for $i from 1 through map-get($SassGrid, numberOfColumns) {
  .#{map-get($SassGrid, rowClassName)}-#{$i} {
    grid-template-columns: repeat($i, 1fr);
  }
  
  .#{map-get($SassGrid, colClassName)}-#{$i} {
    grid-column: span $i; 
  }
}