GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Resizable Split Pane Layouts With No Library

· Godrich · 9 items · 18 min read

InteractionsVanilla JSClickDashboard

A resizable split pane is a layout whose panes share one draggable boundary, so widening one side narrows the other.

Vertical splitter01 panel-vertical-splitter Horizontal splitter02 panel-horizontal-splitter Three-pane editor layout03 panel-three-pane-ide Double-click collapse04 panel-double-click-collapse Snapping guide lines05 panel-snap-guides Handle grip feedback06 panel-handle-grip-feedback Saved ratio presets07 panel-ratio-preset-restore Card corner grip08 panel-corner-resize-grip Responsive auto stack09 panel-responsive-auto-stack

Auto-plays · click a tile to jump to its section · all nine in one zip

The nine are ordered by what the divider learns to do, not by popularity. The first three are the fundamentals: a boundary that slides left and right (01), the same idea rotated onto the vertical axis (02), and both of them joined into a sidebar, an editor, and a console on one screen (03). From the fourth demo on, the divider starts to remember things. It folds and unfolds on a double-click (04), sticks to tidy ratios like a magnet (05), changes shape when the pointer comes near (06), and brings back the last ratio after the tab is closed and reopened (07). The eighth turns the boundary into a single corner point (08), and the last one (09) changes the direction of the boundary itself according to how wide its container is. All nine run as split screen css on one set of pointerdown, pointermove, and pointerup handlers plus a single CSS custom property, with no library at all, and every one of the nine handles takes keyboard input as well. The finger-side basics of moving that boundary live in Mobile Touch Gestures, and navigating between the divided panes is what Breadcrumb UI Patterns takes on.

01Vertical splitter

What this split pane css shows

Drag the middle handle and the width of the left pane tracks the pointer exactly.

Vertical splitter
Open in a new tab

01 · Vertical splitter — Measured area 14.942% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

setPointerCapturegrid-template-columnsaria-valuenow

Where to look in the code

That width lives in a single custom property, --split, which grid-template-columns reads, and the value stops dead once either side reaches its 64px minimum.

function set(pct) {
  var w = box.clientWidth;
  var lo = MIN / w * 100, hi = (w - MIN - BAR) / w * 100;
  var v = Math.max(lo, Math.min(pct, hi));
  root.style.setProperty('--split', v.toFixed(1) + '%');
  bar.setAttribute('aria-valuenow', String(Math.round(v)));
}
bar.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  set((e.clientX - box.getBoundingClientRect().left) / box.clientWidth * 100);
});

02Horizontal splitter

What happens on screen

Dragging the handle up or down trades height between the editor pane above and the result pane below.

Horizontal splitter
Open in a new tab

02 · Horizontal splitter — Measured area 17.602% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointermoveclamparia-orientation

How to read the code

It is the same arithmetic rotated onto the Y axis, and the up and down arrow keys shift the same value five percent at a time.

function clamp(v, lo, hi) { return Math.max(lo, Math.min(v, hi)); }
function set(pct) {
  var h = box.clientHeight;
  var v = clamp(pct, MIN / h * 100, (h - MIN - BAR) / h * 100);
  root.style.setProperty('--splitY', v.toFixed(1) + '%');
  bar.setAttribute('aria-valuenow', String(Math.round(v)));
}
bar.addEventListener('keydown', function (e) {
  var d = e.key === 'ArrowUp' ? -5 : e.key === 'ArrowDown' ? 5 : 0;
  if (!d) return;
  stop();
  set(Number(bar.getAttribute('aria-valuenow')) + d);
  bar.focus({ preventScroll: true });
  e.preventDefault();
});

03Three-pane editor layout

What moves

A file list, an editor, and a console are joined by two handles, and moving one takes room only from the pane beside it.

Three-pane editor layout
Open in a new tab

03 · Three-pane editor layout — Measured area 19.616% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-columnsgrid-template-rowssetPointerCapture

What to change

The outer grid splits the columns while the inner grid splits the rows, so neither handle can touch the other's value.

.tp__box {
  display: grid;
  grid-template-columns: var(--col) 8px 1fr;
  height: 128px;
  overflow: hidden;
}
.tp__main {
  display: grid;
  grid-template-rows: var(--row) 8px 1fr;
  overflow: hidden;
}

04Double-click collapse

What you see

Double-click the handle and the pane beside it folds into a thin rail; double-click again and it returns to the width it had just before folding.

Double-click collapse
Open in a new tab

04 · Double-click collapse — Measured area 9.474% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

dblclickaria-expandedtransition

Where to look in the code

The pre-fold value is kept in one variable, so unfolding restores the last width the reader chose rather than a default.

bar.addEventListener('dblclick', function () {
  stop();
  folded = !folded;
  if (folded) set(RAIL, true);
  else set(last, false);
});
function set(pct, fold) {
  root.style.setProperty('--split', pct.toFixed(1) + '%');
  bar.setAttribute('aria-valuenow', String(Math.round(pct)));
  bar.setAttribute('aria-expanded', String(!fold));
  root.classList.toggle('is-folded', fold);
}

05Snapping guide lines

What happens on screen

Guide lines sit at 25, 50, and 75 percent while you drag, and the value locks onto one as soon as the handle comes within six percent of it.

Snapping guide lines
Open in a new tab

05 · Snapping guide lines — Measured area 14.64% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · See the password

snapopacityMath.abs

How to read the code

Since only distance matters, the whole decision fits into one Math.abs comparison.

var STOPS = [25, 50, 75], NEAR = 6;
function snap(pct) {
  var best = pct;
  for (var i = 0; i < STOPS.length; i++) {
    if (Math.abs(pct - STOPS[i]) < NEAR) best = STOPS[i];
  }
  return Math.max(10, Math.min(best, 90));
}
function set(pct) {
  var v = snap(pct);
  root.style.setProperty('--split', v + '%');
  root.classList.toggle('is-snapped', STOPS.indexOf(v) >= 0);
}

06Handle grip feedback

What moves

At rest the boundary is a hairline; on hover it widens and shows three grip dots, and for as long as the drag lasts it stays in the highlighted color.

Handle grip feedback
Open in a new tab

06 · Handle grip feedback — Measured area 7.308% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleXcubic-beziercursor

What to change

The widening is a scaleX transform rather than a real width change, so the neighboring panes never shift while it happens.

.hg__hair {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 20px;
  border-radius: $r-pill;
  background: $subject-ink;
  transform: translateX(-10px) scaleX(.1);
  transition: transform $duration $easing, background $duration $easing;
}
.hg__bar:hover .hg__hair { transform: translateX(-10px) scaleX(1); }
.hg.is-drag .hg__hair { background: $subject-blue; }

07Saved ratio presets

What you see

The ratio you drag to is written to localStorage right away, and the next visit starts from that stored value.

Saved ratio presets
Open in a new tab

07 · Saved ratio presets — Measured area 8.308% · moving frames 15/23Original by GODRICH · SCSS and React ship in the zip · See the password

localStorageJSON.parsearia-pressed

Where to look in the code

The 1:2, 1:1, and 2:1 preset buttons set the same number in one click and report the current choice through aria-pressed.

function set(pct, mark) {
  var v = Math.max(20, Math.min(pct, 80));
  root.style.setProperty('--split', v.toFixed(1) + '%');
  bar.setAttribute('aria-valuenow', String(Math.round(v)));
  btns.forEach(function (b) {
    var on = mark && b.dataset.v === String(Math.round(v));
    b.classList.toggle('is-on', !!on);
    b.setAttribute('aria-pressed', String(!!on));
  });
  try { localStorage.setItem(KEY, JSON.stringify({ split: Math.round(v) })); } catch (err) { return; }
}

08Card corner grip

What happens on screen

Grab the bottom-right corner and the width and the height grow together; with the lock button on, the height always follows the width times the original ratio.

Card corner grip
Open in a new tab

08 · Card corner grip — Measured area 18.377% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

pointerdownaspectMath.round

How to read the code

The size printed inside the card is read from the same pair of custom properties, so the label can never disagree with the box it sits in.

var RATIO = 96 / 176, locked = true;
function set(w, h) {
  var W = Math.max(120, Math.min(Math.round(w), 220));
  var H = locked ? Math.round(W * RATIO) : Math.max(64, Math.min(Math.round(h), 132));
  root.style.setProperty('--w', W + 'px');
  root.style.setProperty('--h', H + 'px');
  root.style.setProperty('--wn', String(W));
  root.style.setProperty('--hn', String(H));
  grip.setAttribute('aria-valuenow', String(W));
}

09Responsive auto stack

What moves

The moment the container drops below 200px, the two side-by-side panes stack instead, and the handle turns from vertical to horizontal along with them.

Responsive auto stack
Open in a new tab

09 · Responsive auto stack — Measured area 19.089% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

ResizeObserveraria-orientationgrid-template-rows

What to change

The demo measures its own box with ResizeObserver instead of asking a media query about the window, so the same component flips correctly even inside a narrow sidebar.

var ro = new ResizeObserver(function (entries) {
  var w = entries[0].contentRect.width;
  var next = w < FLIP;
  if (next === stacked) return;
  stacked = next;
  root.classList.toggle('is-stack', stacked);
  bar.setAttribute('aria-orientation', stacked ? 'horizontal' : 'vertical');
});
ro.observe(box);

Where it breaks — the trap

The trap all nine share is that a custom property holding the ratio produces no in-between values unless it has been registered. A name like --split is just a string by default, so the browser has no idea what sits between 50% and 26%. Deleting only the @property --split { syntax: "<percentage>" } block from the first demo and re-measuring the same two-second loop dropped the frames with visible movement from 19 out of 24 to 7; the average difference across the changed pixels fell from 121.9 to 64.6. In other words, the width stopped flowing and began jumping from one keyframe stop to the next. Putting the declaration back brought the same code straight back to 19 frames. Dragging with a mouse hides this completely, because the script writes a fresh value on every frame; the problem shows up only where CSS has to fill the gap itself, such as the fold animation or a preset move.

The second trap was the number and the picture drifting apart. Demo 08 prints its own size as text, and as long as that text was updated from script alone, the card kept growing during autoplay while the label stayed frozen at its starting value. Demo 07 was subtler: its preset buttons lit up at the moment of the click, so a frame captured mid-glide showed 2:1 pressed while the panes were still at 1:1. Demo 08 now derives the text from an integer property read by counter(), tied to the very values that size the card, and demo 07 waits until the ratio has arrived before marking a button. Neither fault trips an automated check; both show up only as an odd frame now and then.

Symptom Actual cause Where to fix it
Folding and preset moves jump the ratio property is unregistered, so there are no in-between values @property with syntax: "<percentage>"
The drag stops when the pointer slips off the pointer is not bound to the handle setPointerCapture inside pointerdown
The layout fails to flip on narrow screens the window is being measured ResizeObserver on the box itself

To put a reacting wave inside a pane, the bar math of Audio Visualizer JavaScript drops straight in. All three rows are already fixed in the nine sources inside the zip, which opens with the archive password 34ze99gp, and the vanilla and React builds share the same values.

Accessibility (reduced-motion)

Not one of the nine is mouse-only. Every boundary carries role="separator" and aria-orientation so that its purpose and its direction are announced, with aria-valuemin, aria-valuemax, and aria-valuenow reading out the current ratio as a number. Demos 01, 02, 03, 05, 06, 07, and 09 move on the left and right or the up and down arrows, demo 04 folds and unfolds on Enter and Space, and demo 08 shifts the card width eight pixels at a time on the horizontal arrows. Demo 07 also reaches its ratio without the handle at all, because its three presets are real buttons. The handle in demo 04 also carries aria-expanded, and demo 09 updates aria-orientation when the layout flips. Keyboard moves call focus({ preventScroll: true }) because these demos sit in iframes inside listing pages, and without that option the parent page jumps downward on every keypress. Under prefers-reduced-motion: reduce only the autoplay loop and the transitions stop, while dragging, keyboard control, and the values themselves stay. The role behind a draggable boundary is documented in the MDN separator role reference.

For parts that pair well with these, the dashboard category and the click category collect the closest neighbors.

FAQ

Why does this resizable panel ui put the ratio in a grid template rather than a width?

Because the arithmetic changes the moment there are three tracks. Giving each pane its own width means subtracting the handle thickness by hand and deciding in code which pane absorbs the change. Writing grid-template-columns: var(--split) 8px 1fr moves the handle into a fixed track and lets 1fr take whatever is left, so the only moving number is --split. Demo 03 applies the same pattern once to columns and once to rows, which is what keeps its two handles independent. The editor screen where split panes earn their keep is shown whole in Code Editor JavaScript.

Why does the drag stop when the cursor leaves the handle?

Because the pointer was never bound to it. By default, an element stops receiving events as soon as the pointer crosses its boundary, so a fast drag loses the handle halfway. Calling setPointerCapture(e.pointerId) once inside pointerdown keeps events flowing to that handle until the button is released, even outside the panel or past the window edge. All nine demos have a drag, and every one of them rests on that single line.

Why does my saved ratio not come back in some browsers?

In private windows, and under other locked-down storage settings, writing to localStorage throws. That is why demo 07 wraps both the save and the restore in try. A thrown error simply means the value could not be read, so the layout starts at its default ratio; leave the guard out and the script dies at that line in those browsers, which stops the handle from moving at all.

Enter the archive password

The password is inside this article. You will find it as you read.