JSFiddle - React, Tailwind, and code Playground

grid resize test left/right columns separated

by Travis Almand

HTML

<div class="container">
  <div class="left">
    <div class="top content"></div>
    <div class="gutter" data-gutter="left"></div>
    <div class="bottom content"></div>
  </div>
  <div class="gutter" data-gutter="center"></div>
  <div class="right">
    <div class="top content"></div>
    <div class="gutter" data-gutter="right"></div>
    <div class="bottom content"></div>
  </div>
</div>

SCSS

:root {
  --left: 1fr;
  --topLeft: 1fr;
  --topRight: 1fr;
}

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

.container {
  display: grid;
  grid-template-columns: var(--left) 10px 1fr;
  height: 100%;
  
  .left {
    display: grid;
    grid-template-rows: var(--topLeft) 10px 1fr;
  }
  .right {
    display: grid;
    grid-template-rows: var(--topRight) 10px 1fr;
  }
  
  .gutter {
    background-color: gray;
    
    &[data-gutter="left"],
    &[data-gutter="right"] {
      cursor: ns-resize;
    }
    
    &[data-gutter="center"] {
      cursor: ew-resize;
    }
  }
  .content {
    background-color: gainsboro;
  }
}

JavaScript

console.clear();

const leftGutter = document.querySelector('[data-gutter="left"]');
const centerGutter = document.querySelector('[data-gutter="center"]');
const rightGutter = document.querySelector('[data-gutter="right"]');
const gutter = {};
let draggingGutter = false;

leftGutter.addEventListener('mousedown', gutter_MD);
centerGutter.addEventListener('mousedown', gutter_MD);
rightGutter.addEventListener('mousedown', gutter_MD);
document.body.addEventListener('mouseup', body_MU);
document.body.addEventListener('mouseleave', body_MU);
document.body.addEventListener('mousemove', body_MM);

function gutter_MD (e) {
  draggingGutter = true;
  gutter.x = e.clientX;
	gutter.y = e.clientY;
  gutter.type = e.target.dataset.gutter;
}

function body_MU (e) {
	draggingGutter = false;
}

function body_MM (e) {
	if (draggingGutter) {
  	var bodyHeight = document.body.clientHeight;
    var bodyWidth = document.body.clientWidth;
    
  	if (gutter.type === 'left') {
			if (e.clientY > 10 && e.clientY < bodyHeight - 20) {
				document.documentElement.style.setProperty('--topLeft', e.clientY + 'px');
			}
    }
		
		if (gutter.type === 'right') {
			if (e.clientY > 10 && e.clientY < bodyHeight - 20) {
				document.documentElement.style.setProperty('--topRight', e.clientY + 'px');
			}
    }
		
		if (gutter.type === 'center') {
			if (e.clientX > 10 && e.clientX < bodyWidth - 20) {
				document.documentElement.style.setProperty('--left', e.clientX + 'px');
			}
		}
  }
}