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

# Grid items

## Basic items

Each child of `DndGrid` is a grid item. The child's `key` must match the layout `id`.

```tsx
<DndGrid layout={layout}>
  <div key="a">Content A</div>
  <div key="b">Content B</div>
  <div key="c">Content C</div>
</DndGrid>
```

## Styling items

Grid items are absolutely positioned with transforms. Style your content directly.

```tsx
<DndGrid layout={layout}>
  <div key="widget" className="my-widget">
    <h2>Dashboard Widget</h2>
    <p>Widget content goes here</p>
  </div>
</DndGrid>
```

```css
.my-widget {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
  height: 100%;
  overflow: auto;
}
```

<Note>
  Use `height: 100%` to fill the allocated space.
</Note>

## Item behaviour

Use per-item fields to lock items, constrain size, or override grid settings.

```tsx
const layout: Layout = [
  { id: "header", x: 0, y: 0, w: 12, h: 1, static: true },
  { id: "content", x: 0, y: 1, w: 8, h: 4, minW: 4, maxW: 10 },
  {
    id: "custom",
    x: 8,
    y: 1,
    w: 4,
    h: 4,
    draggable: false,
    resizable: true,
    bounded: true,
    resizeHandles: ["s", "e"],
  },
];
```

Resize handles support edges (`n`, `e`, `s`, `w`) and corners (`ne`, `nw`, `se`, `sw`).

## Custom components

Custom components must forward `ref`, `style`, `className`, and event handlers.

```tsx
import { forwardRef } from "react";

interface WidgetProps {
  title: string;
  children: React.ReactNode;
}

const Widget = forwardRef<HTMLDivElement, WidgetProps>(
  ({ title, children, ...props }, ref) => {
    return (
      <div ref={ref} {...props} className="widget">
        <h3>{title}</h3>
        {children}
      </div>
    );
  }
);

<DndGrid layout={layout}>
  <Widget key="a" title="Sales">
    <Chart data={salesData} />
  </Widget>
</DndGrid>
```

## Drag regions

Limit dragging to a handle or exclude specific elements:

```tsx
<DndGrid
  dragHandle=".drag-handle"
  dragCancel=".no-drag"
  layout={layout}
>
  <div key="a">
    <div className="drag-handle">Drag here</div>
    <button className="no-drag">Click me</button>
    <div>Content</div>
  </div>
</DndGrid>
```