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

# Responsive layout

<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="Responsive layout preview"
    src="https://dnd-grid.com/examples/responsive-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-responsive-example.tsx)

## Installation

<Tabs>
<Tab title="CLI">

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

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

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

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

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

import { ResponsiveDndGrid, type ResponsiveLayouts } from "@dnd-grid/react";

const layouts: ResponsiveLayouts = {
  lg: [
    { id: "a", x: 0, y: 0, w: 6, h: 2 },
    { id: "b", x: 6, y: 0, w: 3, h: 2 },
    { id: "c", x: 9, y: 0, w: 3, h: 2 },
    { id: "d", x: 0, y: 2, w: 12, h: 2 },
  ],
  sm: [
    { id: "a", x: 0, y: 0, w: 4, h: 2 },
    { id: "b", x: 0, y: 2, w: 4, h: 2 },
    { id: "c", x: 0, y: 4, w: 4, h: 2 },
    { id: "d", x: 0, y: 6, w: 4, h: 2 },
  ],
};

const cards = ["a", "b", "c", "d"];

export function ResponsiveExample() {
  return (
    <ResponsiveDndGrid
      layouts={layouts}
      gap={{ lg: 16, sm: 12 }}
      containerPadding={{ lg: 16, sm: 12 }}
      rowHeight={48}
    >
      {cards.map((id) => (
        <div key={id}>{id}</div>
      ))}
    </ResponsiveDndGrid>
  );
}
```

</Tab>
</Tabs>

## Usage

```tsx
import { ResponsiveExample } from "@/components/dnd-grid-responsive-example";

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