For AI agents: the documentation index is at /dnd-grid/docs/llms.txt. Append .md to any page URL, or send Accept: text/markdown, for the Markdown version of that page.
For AI agents: the documentation index is at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
How the grid system works.
The layout is the grid state. It is an array of items with position and size.
import { type Layout } from "@dnd-grid/react";
const layout: Layout = [
{ id: "a", x: 0, y: 0, w: 4, h: 2 },
{ id: "b", x: 4, y: 0
Published with Edda
| 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));
};