JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="container">
  <div class="grid">
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
    <div class="col col-1 col-6-md col-12-lg"></div>
  </div>
</div>

SCSS

/* div.col.col-$-sm{col $}*12 */
$maxColumns: 12;
$startColumn: 1;
$gap: 1rem;

$desktop: 80rem;
$tablet: 48rem;
$mobile: 40rem;
$screenSizes: (
    sm: $mobile,
    md: $tablet,
    lg: $desktop,
);

.container {
  max-width: $desktop;
  margin: 0 auto;
  
  @each $name, $size in $screenSizes {
    @media screen and (min-width: $size) {
      max-width: $size;
    }
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat($maxColumns, minmax(auto, 1fr));
  
  @media screen and (min-width: $mobile) {
    max-width: $size;
  }
}

.col {
  padding: 1rem;
  background: salmon;
  
  @for $i from $startColumn through $maxColumns {
    &.col-#{$i} {
     grid-column: span $i;
    }
  }
 
  @each $name, $size in $screenSizes {
    @media screen and (min-width: $size) {
      @for $i from $startColumn through $maxColumns {
        &.col-#{$i}-#{$name} {
         grid-column: span $i;
        }
      }
    }
  }
}