← Docs
Recipe

Column Resize

Draggable column dividers with min-width constraints and persistent layout state.

Pattern

Column A
Column B

Key Mechanics

  • Track mousedown on the divider to enter drag mode.
  • Apply min-width and max-width guards so columns never collapse.
  • Persist ratios to localStorage keyed by layout ID.
  • Use ResizeObserver for container-driven ratio recalc on window resize.

Edge Cases

Double-click reset

Double-clicking the divider snaps columns back to their default ratio.

Touch support

Bind touchstart/touchmove for mobile parity.

Nested resizers

Stop propagation so inner dividers do not trigger outer drag handlers.

Cursor lock

Set cursor: col-resize on body during drag to prevent flicker.

Back to DocsAll Recipes