Skip to Content
snapgrid is a react-grid-layout v2 alternative built on dnd-kit. Drag, resize, repack, and drag between grids.
DocumentationGuidesStatic items

Static items

Mark a layout item static: true to anchor it: other tiles compact around it instead of through it, and by default it can’t be dragged or resized.

const layout = [ { i: "a", x: 0, y: 0, w: 3, h: 2 }, { i: "pinned", x: 3, y: 0, w: 3, h: 2, static: true }, // never moves { i: "b", x: 6, y: 0, w: 3, h: 2 }, ];
Static items
LOCKED: the anchor can't be dragged — others flow around it

By default static means “an obstacle during compaction that can’t be dragged or resized.” The per-item isDraggable / isResizable flags can opt back in, though (see pinned tiles below) — so a static tile is only fully locked when you leave those unset.

Pinned tiles (anchored, but draggable)

Combine static: true with isDraggable: true for a tile that compaction never moves — others flow around it — yet the user can still pick it up and reposition by hand. (isResizable: true is the same opt-in for resizing.) Think of it as pinned: anchored against automatic reflow, but not locked away from the user.

const layout = [ { i: "panel", x: 0, y: 0, w: 4, h: 4, static: true, isDraggable: true }, // anchored, still draggable { i: "a", x: 4, y: 0, w: 4, h: 2 }, { i: "b", x: 8, y: 0, w: 4, h: 2 }, ];

Notes

  • Static placement is preserved by the built-in compactors (vertical, horizontal, none) and by the masonry/gravity/shelf extra packers — each reserves static tiles and packs the rest around them.
  • A static tile still renders through your normal markup; style it however you like (the demo above uses a hatched fill). snapgrid exposes the item’s state so you can branch on item.static.
Last updated on