Static items
Mark items as static so they cannot be moved or resized while other items drag and reflow around them in this static-items dnd-grid React example.
How it works
Marking a layout item static: true makes it immovable and unresizable, and other items compact around it rather than through it. The pinned cards in this example stay put no matter how the rest of the grid is rearranged.
Use it for headers, summary tiles, or anything that should hold its position while the user arranges everything else. Static items still participate in collision, so they act as fixed obstacles rather than disappearing from the layout.
Related examples
- 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.
- 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.
- 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.
- 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.