JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://unpkg.com/split-grid/dist/split-grid.js"></script>

<div class="grid">
  <div class="track">c1</div>
  <div class="column-1">c1</div>
    <div class="track">c1</div>

  <div class="column-2">c1</div>
    <div class="track">c1</div>

  <div class="row-1">r1</div>


</div>

CSS

.grid {
  border: solid 1px red;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
}

.grid div {
  border: dotted 1px green;
}

JavaScript

Split(document.querySelector('.grid'), {
  columnGutters: [{
    track: 2,
    element: document.querySelector('.column-1'),
  }, {
    track: 4,
    element: document.querySelector('.column-3'),
  }],
  rowGutters: [{
    track: 1,
    element: document.querySelector('.row-1'),
  }]
})