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.
How it works
The smallest useful dnd-grid setup: a layout array of items with id, x, y, w, and h, a column count, a row height, and an onLayoutChange handler. The grid is controlled, so the layout you pass in is the layout that renders, and every drag or resize hands you a new array to store.
Each child is matched to a layout entry by its key, which means you render your own markup inside every cell and dnd-grid only positions it. Start here, then add the behaviour you need from the other examples.
Related examples
- Responsive layout — Define breakpoint-specific layouts that adapt to the container width so the grid reflows responsively across screen sizes in this dnd-grid React example.
- Dynamic add/remove — Add and remove grid items at runtime and watch the layout compact and reflow automatically in this dynamic add and remove dnd-grid React grid example.
- Local storage — Persist the grid layout to local storage and restore it on reload so user arrangements survive page refreshes in this dnd-grid React persistence example.
- Bounded — Keep grid items inside the grid bounds so they cannot be dragged or resized outside the container in this bounded dnd-grid React layout example.