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.
How it works
ResponsiveDndGrid takes a layouts object keyed by breakpoint instead of a single layout array, and picks the right one from the measured container width. Because it measures the container rather than the viewport, a grid inside a sidebar breaks at the sidebar's width.
Each breakpoint keeps its own arrangement, so rearranging on a narrow screen does not disturb the desktop layout. If you need the breakpoint value in your own code, useDndGridResponsiveLayout exposes the same resolution logic.
Related examples
- 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.
- Aspect ratio constraints — Lock item resizing to a fixed aspect ratio so cards keep their proportions while you drag the resize handles in this dnd-grid React layout example.
- Headless wrapper — Build a fully custom grid wrapper with the headless useDndGrid hook while dnd-grid handles drag, resize, and layout maths under the hood in React.
- 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.