Multiple instances
Run two independent dnd-grid instances on a single page, each with its own draggable and resizable layout state, in this multiple-instances React example.
Grid A
Grid B
How it works
Two grids on one page, each owning its own layout state and its own compaction. Nothing is shared through a global, so instances do not interfere with one another and an item dragged in one grid has no effect on the other.
This is the pattern for dashboards split into sections, or for a settings screen where each panel is independently arrangeable. If you do want items to move between grids, look at the toolbox example instead.
Related examples
- 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.
- 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.
- Portal — Render the grid through createPortal into a separate DOM container while keeping drag and resize behaviour intact in this dnd-grid React portal example.
- 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.