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

# Constraints

<div className="not-prose my-6 rounded-lg border border-zinc-200/70 bg-white/70 shadow-sm dark:border-white/10 dark:bg-white/5">
  <iframe
    title="Constraints preview"
    src="https://dnd-grid.com/examples/constraints-example?embed=1"
    className="h-[640px] w-full"
    loading="lazy"
  />
</div>

[View source on GitHub](https://github.com/mblode/dnd-grid/blob/main/apps/web/examples/dnd-grid-constraints-example.tsx)

## Installation

<Tabs>
<Tab title="CLI">

```bash
npx shadcn@latest add https://dnd-grid.com/r/constraints-example.json
```

</Tab>
<Tab title="Manual">

```bash
npm install @dnd-grid/react
```

```css
@import "@dnd-grid/react/styles.css";
```

```tsx title="components/dnd-grid-constraints-example.tsx"
"use client";

import {
  DndGrid,
  defaultConstraints,
  type Layout,
  type LayoutConstraint,
  snapToGrid,
} from "@dnd-grid/react";
import { useState } from "react";

const topBandConstraint: LayoutConstraint = {
  name: "topBand(4)",
  constrainPosition(item, x, y) {
    const maxY = Math.max(0, 4 - item.h);
    return { x, y: Math.min(y, maxY) };
  },
};

const gridConstraints: LayoutConstraint[] = [
  ...defaultConstraints,
  snapToGrid(2, 1),
];

const initialLayout: Layout = [
  { id: "snap", x: 0, y: 0, w: 3, h: 2 },
  {
    id: "limits",
    x: 3,
    y: 0,
    w: 3,
    h: 2,
    minW: 2,
    maxW: 5,
    minH: 2,
    maxH: 4,
  },
  {
    id: "band",
    x: 6,
    y: 0,
    w: 3,
    h: 2,
    constraints: [topBandConstraint],
  },
];

export function ConstraintsExample() {
  const [layout, setLayout] = useState<Layout>(initialLayout);

  return (
    <DndGrid
      layout={layout}
      cols={12}
      rowHeight={50}
      constraints={gridConstraints}
      onLayoutChange={setLayout}
    >
      {layout.map((item) => (
        <div key={item.id} className="grid-item">
          {item.id}
        </div>
      ))}
    </DndGrid>
  );
}
```

</Tab>
</Tabs>

## Usage

```tsx
import { ConstraintsExample } from "@/components/dnd-grid-constraints-example";

export default function Page() {
  return <ConstraintsExample />;
}
```