Compactor showcase
Switch between vertical, horizontal, and no compaction to see how dnd-grid repositions items and fills empty space as you drag them around the grid.
How it works
A compactor decides where items settle once a drag ends. This example switches between vertical compaction, which pulls everything toward the top, horizontal compaction, which pulls toward the left, and no compaction at all, which leaves items exactly where they were dropped.
Vertical is the right default for feeds and dashboards where gaps look like bugs. Horizontal suits toolbars and timelines. No compaction suits freeform boards. Because the compactor is a prop, you can expose the choice to users as this demo does.
Related examples
- Allow overlap — Let grid items stack on top of each other without collision, so cards can overlap freely while you drag and resize them in this dnd-grid React example.
- Constraints — Plug in custom constraints and rules to control where items can move and how far they can resize in this constraint-driven dnd-grid React layout example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.
- Toolbox — Move items between the grid and a separate toolbox panel, dragging blocks in and out of an off-grid tray in this toolbox dnd-grid React example.