> ## 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 item

## Layout type

`Layout<TData>` is an array of `LayoutItem<TData>` objects:

```tsx
import { type Layout } from "@dnd-grid/react";

type CardData = { kind: "chart" | "text" };

const layout: Layout<CardData> = [
  { id: "a", x: 0, y: 0, w: 2, h: 2, data: { kind: "chart" } },
  { id: "b", x: 2, y: 0, w: 2, h: 2, data: { kind: "text" } },
];
```

## Properties

### Required

<ResponseField name="id" type="string" required>
  Unique id. Must match the child's `key`.
</ResponseField>

<ResponseField name="x" type="number" required>
  X position in grid units (0-based).
</ResponseField>

<ResponseField name="y" type="number" required>
  Y position in grid units (0-based).
</ResponseField>

<ResponseField name="w" type="number" required>
  Width in grid units.
</ResponseField>

<ResponseField name="h" type="number" required>
  Height in grid units.
</ResponseField>

### Optional

<ResponseField name="minW" type="number">
  Minimum width.
</ResponseField>

<ResponseField name="maxW" type="number">
  Maximum width.
</ResponseField>

<ResponseField name="minH" type="number">
  Minimum height.
</ResponseField>

<ResponseField name="maxH" type="number">
  Maximum height.
</ResponseField>

<ResponseField name="constraints" type="LayoutConstraint[]">
  Per-item drag and resize constraints.
</ResponseField>

<ResponseField name="static" type="boolean" default="false">
  If true, the item is locked.
</ResponseField>

<ResponseField name="draggable" type="boolean">
  Override grid drag setting.
</ResponseField>

<ResponseField name="resizable" type="boolean">
  Override grid resize setting.
</ResponseField>

<ResponseField name="bounded" type="boolean">
  Override grid bounded setting.
</ResponseField>

<ResponseField name="resizeHandles" type="ResizeHandleAxis[]">
  Override grid resize handles.
</ResponseField>

<ResponseField name="data" type="TData">
  Optional typed metadata for the item.
</ResponseField>

## Examples

### With size constraints

```tsx
const layout: Layout = [
  {
    id: "constrained",
    x: 0, y: 0, w: 4, h: 3,
    minW: 2, maxW: 8,
    minH: 2, maxH: 6,
  },
];
```