Resizing

A grid item resizes from handles at its edges and corners. You declare which axes are resizable with resizeConfig, and clamp each item’s size with minW / maxW / minH / maxH. resizeConfig is an option on useGridContainer (and, identically, a prop on the <GridLayout> shell):

const { containerProps, group } = useGridContainer({
  layout,
  width,
  onLayoutChange: setLayout,
  resizeConfig: { handles: ["se", "e", "s"] },
});

resizeConfig options

The eight 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).

Rendering handles (headless)

useGridResizeHandle({ id, handle, group }) models a handle as its own draggable. Spread its ref and handleProps onto an element you position and style — handleProps marks the element so a pointer-down resizes instead of starting an item drag:

function Tile({ id, group }) {
  const { ref, style } = useGridItem({ id, group });
  const resize = useGridResizeHandle({ id, handle: "se", group });
  return (
    <div ref={ref} style={style} className="tile">
      {id}
      {/* CSS places + styles `.resize-handle` at the corner */}
      <span ref={resize.ref} {...resize.handleProps} className="resize-handle" />
    </div>
  );
}

Render one handle per axis you configured. useGridResizeHandle also returns isResizing for styling. See Headless usage for the full picture.

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
];