JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://unpkg.com/split-grid/dist/split-grid.js"></script>
<div id='base' class="grid">
  <div class="container a">
    <img src="https://placekitten.com/g/400/400" class="map a">
  </div>
  <div class="gutter-col gutter-col-1"></div>
  <div class="container b">
    <img src="https://placekitten.com/g/401/401" class="map b">

  </div>
  <div class="container c">
    <img src="https://placekitten.com/g/402/402" class="map c">

  </div>
  <div class="gutter-row gutter-row-1"></div>
  <div class="container d">
    <img src="https://placekitten.com/g/403/403" class="map d">

  </div>
</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.grid {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 10px 1fr;
  grid-template-columns: 1fr 10px 1fr;
  position: relative;
}

.gutter-col,
.gutter-row {
  z-index: 2;
  background: blue;
}

.gutter-col {
  grid-row: 1/-1;
  cursor: col-resize;
}

.gutter-col-1 {
  grid-column: 2;
  border: 1px solid red;
}

.gutter-row {
  grid-column: 1/-1;
  cursor: row-resize;
}

.gutter-row-1 {
  grid-row: 2;
  border: 1px solid red;
}


.container {
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.map {
  width: 100vw;
  height: 100vh;
  border: 1px solid yellow;
}

JavaScript

Split({
  columnGutters: [{
    track: 1,
    element: document.querySelector('.gutter-col-1'),
  }],
  rowGutters: [{
    track: 1,
    element: document.querySelector('.gutter-row-1'),
  }],
  onDrag: update
})
let idFrame = 0;
const elMaps = document.querySelectorAll(".map");
update();


function update() {
  cancelAnimationFrame(idFrame);
  idFrame = requestAnimationFrame(() => {
    const base = document.getElementById("base").getBoundingClientRect();
    for (const elMap of elMaps) {
      const b = elMap.parentElement.getBoundingClientRect();
      const dy = b.top - base.top;
      const dx = b.left - base.left;
      elMap.dataset.dy = dy;
      elMap.dataset.dx = dx;
      elMap.style.transform = `translate(${-dx}px,${-dy}px)`;
    }
  })
}