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

# useDndGridResponsiveLayout

`useDndGridResponsiveLayout` keeps a layout per breakpoint, generates missing
layouts, and returns ready-to-spread props for `DndGrid`. Use
`ResponsiveDndGrid` for the default responsive component.

## Example

```tsx
import {
  DndGrid,
  type Layout,
  useContainerWidth,
  useDndGridResponsiveLayout,
} from "@dnd-grid/react";
import "@dnd-grid/react/styles.css";

const layouts: Record<string, Layout> = {
  lg: [
    { id: "a", x: 0, y: 0, w: 4, h: 2 },
    { id: "b", x: 4, y: 0, w: 4, h: 2 },
  ],
  md: [
    { id: "a", x: 0, y: 0, w: 6, h: 2 },
    { id: "b", x: 0, y: 2, w: 6, h: 2 },
  ],
};

export function ResponsiveGrid() {
  const { width, containerRef, mounted } = useContainerWidth({
    measureBeforeMount: true,
  });

  const { gridProps, handleLayoutChange, breakpoint } =
    useDndGridResponsiveLayout({
      width,
      layouts,
      gap: { lg: 16, md: 12 },
      containerPadding: 16,
    });

  return (
    <div ref={containerRef}>
      <p>Breakpoint: {breakpoint}</p>
      {mounted && (
        <DndGrid
          width={width}
          {...gridProps}
          onLayoutChange={handleLayoutChange}
        >
          <div key="a">A</div>
          <div key="b">B</div>
        </DndGrid>
      )}
    </div>
  );
}
```

## Options

| Option | Type | Description |
|--------|------|-------------|
| `width` | `number` | Required. Container width in pixels. |
| `breakpoints` | `Record<Breakpoint, number>` | Breakpoint map, defaults to `lg`, `md`, `sm`, `xs`, `xxs`. |
| `cols` | `Record<Breakpoint, number>` | Column count per breakpoint. |
| `layouts` | `ResponsiveLayouts` | Controlled layouts per breakpoint. |
| `defaultLayouts` | `ResponsiveLayouts` | Uncontrolled initial layouts. |
| `gap` | `ResponsiveSpacing` | Gap per breakpoint (number or spacing object). |
| `containerPadding` | `ResponsiveSpacing | null` | Padding per breakpoint (or `null` to use gap). |
| `compactor` | `Compactor` | Compaction strategy for generated layouts. |
| `missingLayoutStrategy` | `"derive" \| "warn" \| "error" \| "empty"` | Control how missing breakpoint layouts are handled. |
| `onBreakpointChange` | `(bp, cols) => void` | Fires when the active breakpoint changes. |
| `onLayoutsChange` | `(layouts) => void` | Fires when any breakpoint layout changes. |
| `onLayoutChange` | `(layout, layouts) => void` | Fires when the active layout changes. |
| `onWidthChange` | `(width, gap, cols, padding) => void` | Fires on width or breakpoint config changes. |

## Returns

| Value | Description |
|-------|-------------|
| `layout` | Layout for the active breakpoint. |
| `layouts` | Full breakpoint layout map. |
| `breakpoint` | Current breakpoint key. |
| `cols` | Column count for the current breakpoint. |
| `gap` | Resolved gap for the current breakpoint. |
| `containerPadding` | Resolved container padding for the current breakpoint. |
| `gridProps` | `{ layout, cols, gap, containerPadding }` to spread onto `DndGrid`. |
| `setLayoutForBreakpoint` | Update a specific breakpoint layout. |
| `setLayouts` | Replace all layouts. |
| `handleLayoutChange` | Helper for `DndGrid`'s `onLayoutChange`. |
| `sortedBreakpoints` | Breakpoints sorted smallest to largest. |

<Note>
  Missing layouts are derived from the nearest larger breakpoint and compacted
  by default (with a dev warning). Use `missingLayoutStrategy` to warn, throw,
  or return an empty layout instead.
</Note>