JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row example">
  <div class="col-4">A</div>
  <div class="col-8">B</div>
</div>

<div class="row example">
  <div class="col-4">A</div>
  <div class="col-4">B</div>
  <div class="col-4">C</div>
</div>

<div class="row example">
  <div class="col-8">A</div>
  <div class="col-4">B</div>
</div>

SCSS

$grid-columns: 12;
$grid-gap: 16px;

.row {
  display: grid !important;
  grid-gap: $grid-gap;
  grid-template-columns: repeat($grid-columns, 1fr);
}

.row + .row {
  margin-top: $grid-gap;
}

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

/************************************/

.example > * {
  background: #08f;
  color: white;
  height: 50px;
}