JSFiddle - React, Tailwind, and code Playground

grid resize test all four content areas resize

by Travis Almand

HTML

<div class="container">
	<div class="content"></div>
	<div class="gutter" data-gutter="vertical"></div>
	<div class="content"></div>
	
	<div class="gutter" data-gutter="horizontal"></div>
	<div class="gutter" data-gutter="center"></div>
	<div class="gutter" data-gutter="horizontal"></div>
	
	<div class="content"></div>
	<div class="gutter" data-gutter="vertical"></div>
	<div class="content"></div>
</div>

SCSS

:root {
	--horizontal: 1fr;
	--vertical: 1fr;
}

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

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

JavaScript

console.clear();

const horizontalGutters = document.querySelectorAll('[data-gutter="horizontal"]');
const verticalGutters = document.querySelectorAll('[data-gutter="vertical"]');
const centerGutter = document.querySelector('[data-gutter="center"]');
const gutter = {};
let draggingGutter = false;
let bodyHeight;
let bodyWidth;

for (let i = 0; i < horizontalGutters.length; i++) {
	horizontalGutters[i].addEventListener('mousedown', gutter_MD);
}

for (let i = 0; i < verticalGutters.length; i++) {
	verticalGutters[i].addEventListener('mousedown', gutter_MD);
}

centerGutter.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) {
  	bodyHeight = document.body.clientHeight;
    bodyWidth = document.body.clientWidth;
    
  	if (gutter.type === 'horizontal' && e.clientY > 10 && e.clientY < bodyHeight - 20) {
			document.documentElement.style.setProperty('--vertical', e.clientY + 'px');
		}
		
		if (gutter.type === 'vertical' && e.clientX > 10 && e.clientX < bodyWidth - 20) {
			document.documentElement.style.setProperty('--horizontal', e.clientX + 'px');
    }
		
		if (gutter.type === 'center' && e.clientY > 10 && e.clientY < bodyHeight - 20 && e.clientX > 10 && e.clientX < bodyWidth - 20) {
			document.documentElement.style.setProperty('--vertical', e.clientY + 'px');
			document.documentElement.style.setProperty('--horizontal', e.clientX + 'px');
		}
  }
}