> ## Documentation Index
> Fetch the complete documentation index at: https://dnd-grid.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

## The layout object

The layout is the grid state. It is an array of items with position and size.

```ts
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, w: 4, h: 2 },
];
```

### Properties

| 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](/api-reference/layout-item).

## Grid system

The grid uses a column and row coordinate system.

- **Columns (`x`):** Count is set by `cols` (default 12).
- **Rows (`y`):** Rows grow downward; height is set by `rowHeight`.
- **Width (`w`):** Number of columns an item spans.
- **Height (`h`):** Number of rows an item spans.

## Compaction

Compaction controls how items pack when space opens up.

```tsx
import {
  verticalCompactor,
  horizontalCompactor,
  noCompactor,
} from "@dnd-grid/react";

<DndGrid compactor={verticalCompactor} />
<DndGrid compactor={horizontalCompactor} />
<DndGrid compactor={noCompactor} />
```

## Collisions

Choose collision behaviour when items overlap.

- **Push (default):** The dragged item pushes others out of the way.
- **Prevent collision:** The dragged item is blocked by others.
- **Allow overlap:** Items can be placed on top of each other.

```tsx
import { verticalCompactor, verticalOverlapCompactor } from "@dnd-grid/react";

<DndGrid compactor={{ ...verticalCompactor, preventCollision: true }} />
<DndGrid compactor={verticalOverlapCompactor} />
```

## Persistence

The layout is JSON-serialisable, so saving it is straightforward.

```tsx
const onLayoutChange = (newLayout) => {
  localStorage.setItem("grid", JSON.stringify(newLayout));
};
```