Recipe
Resizable Dashboard Widget
Build a draggable, resizable widget grid with persistent layout state.
Overview
A CSS Grid–based widget system with resize handles and drag-to-reorder. Layout state persists to localStorage so user arrangements survive reloads. Each widget declares min/max dimensions and the grid auto-flows remaining items into available slots.
Key Ingredients
- ▸CSS Grid with named areas and auto-placement fallback
- ▸ResizeObserver on each widget cell to clamp dimensions
- ▸Pointer events for drag handles with grid-column/grid-row updates
- ▸localStorage layout cache keyed by widget ID
Gotchas
Watch out: Resize handles must stopPropagation to avoid triggering drag on parent. Use touch-action: none on handles for mobile. Grid gaps count toward available space — subtract them when computing max cell spans.