JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="grid">
  <div class="_ main"></div>
</div>

<div class="grid">
  <div class="_ from-1 through-6"></div>
  <div class="_ from-4 through-9"></div>
  <div class="_ from-7 through-9"></div>
  <div class="_ from-10 through-12"></div>
  
  <div class="right-gutter">test</div>
  <div class="left-gutter">test</div>
</div>

SCSS

._ {
  min-height: 3rem;
  background: #f002;
}

.grid {
  display: grid;
  gap: 20px;
  grid: auto / [full-start] minmax(0, 1fr) [main-start] repeat(12, minmax(0, 64px)) [main-end] minmax(0, 1fr) [full-end];
  grid-template-areas: "left-gutter main main main main main main main main main main main main right-gutter";
}

.main {
  grid-area: main;
}

@for $i from 1 through 14 {
  .from-#{$i} { 
    grid-row-start: 1;
    grid-column-start: #{$i + 1};
  };
  .to-#{$i} {
    grid-row-start: 1;
    grid-column-end: #{$i + 1};
  }
  .through-#{$i} {
    grid-row-start: 1;
    grid-column-end: #{$i + 2};
  }
}