Resizing
Items resize from their handles. The bottom-right (se) corner handle is shown by default;
configure which handles appear with resizeConfig, and clamp sizes per item with
minW / maxW / minH / maxH.
<GridLayout
layout={layout}
width={width}
onLayoutChange={setLayout}
resizeConfig={{ handles: ["se", "e", "s"] }}
/>resizeConfig options
| Option | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Grid-level on/off for resizing. |
handles | ResizeHandleAxis[] | ["se"] | Which handles to show on each item. |
The eight handle axes are "n", "e", "s", "w", "ne", "nw", "se", "sw". West and
north handles keep the opposite edge anchored as you drag; east and south keep the top-left
anchored and clamp to the grid’s columns (and maxRows, if set).
Per-item constraints
Add limits directly to the layout item. snapgrid enforces them as you resize:
const layout = [
{ i: "a", x: 0, y: 0, w: 4, h: 2, minW: 2, minH: 1 }, // never smaller than 2×1
{ i: "b", x: 4, y: 0, w: 4, h: 2, maxW: 6, maxH: 3 }, // never larger than 6×3
];| Field | Description |
|---|---|
minW / maxW | Minimum / maximum width in columns. maxW defaults to the column count. |
minH / maxH | Minimum / maximum height in rows. maxH defaults to unbounded. |
resizeHandles | Per-item handle set, overriding resizeConfig.handles. |
isResizable | Per-item on/off, overriding the grid default. |
When the active compactor has preventCollision set, a resize that would overlap another tile is
rejected (the item keeps its previous size) rather than pushing neighbours.
Custom handles
With the headless API you render handles yourself via useGridResizeHandle(itemId, axis), which
returns a ref and the marker props that exclude the handle from drag activation. See
Headless usage.