Resizable handles
Resize grid items from all eight edges and corners using the built-in resize handles in this resizable-handles dnd-grid React layout example.
How it works
The resizeHandles prop controls which edges and corners an item can be resized from. The default is the bottom-right corner; this example enables all eight, so items can be grown from any side.
More handles means a larger hit area competing with the drag surface, so it suits sparse grids with big cells more than dense ones. Handles are styled through the library stylesheet, which you can override to match your own design system.
Related examples
- 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.
- 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.
- Kitchen sink — A full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one 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.