AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Layout
How the grid system works.
| Prop | Type | Description |
|---|---|---|
id | string | Required. Unique id, must match the child's key. |
x | number | Required. Column index (0-based). |
y | number | Required. Row index (0-based). |
w | number | Required. Width in columns. |
h | number | Required. Height in rows. |
minW | number | Minimum width. |
maxW | number | Maximum width. |
minH | number | Minimum height. |
maxH | number | Maximum height. |
static | boolean | If true, the item is locked. |
draggable | boolean | Override grid drag setting. |
resizable | boolean | Override grid resize setting. |
For the full LayoutItem shape (constraints, resize handles, data, and more),
see the Layout item API reference.
The grid uses a column and row coordinate system.
x): Count is set by cols (default 12).y): Rows grow downward; height is set by rowHeight.w): Number of columns an item spans.h): Number of rows an item spans.Compaction controls how items pack when space opens up.
import {
verticalCompactor,
horizontalCompactor,
noCompactor,
} from "@dnd-grid/react";
<DndGrid compactor={verticalCompactor} />
<DndGrid compactor={horizontalCompactor} />
<DndGrid compactor={noCompactor} />Choose collision behaviour when items overlap.
import { verticalCompactor, verticalOverlapCompactor } from "@dnd-grid/react";
<DndGrid compactor={{ ...verticalCompactor, preventCollision: true }} />
<DndGrid compactor={verticalOverlapCompactor} />The layout is JSON-serialisable, so saving it is straightforward.
const onLayoutChange = (newLayout) => {
localStorage.setItem("grid", JSON.stringify(newLayout));
};