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

# useContainerWidth

`DndGrid` and `ResponsiveDndGrid` measure container width automatically. Use
`useContainerWidth` when you need the width for custom constraints or to drive
`DndGrid`/`useDndGrid` directly.

## Example

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

const initialLayout: Layout = [
  { id: "a", x: 0, y: 0, w: 3, h: 2 },
  { id: "b", x: 3, y: 0, w: 3, h: 2 },
];

export function MeasuredGrid() {
  const [layout, setLayout] = useState(initialLayout);
  const { width, containerRef, mounted } = useContainerWidth({
    measureBeforeMount: true,
    initialWidth: 800,
  });

  return (
    <div ref={containerRef} style={{ width: "100%" }}>
      {mounted && width > 0 && (
        <DndGrid
          layout={layout}
          onLayoutChange={setLayout}
          cols={12}
          rowHeight={40}
          width={width}
        >
          <div key="a">A</div>
          <div key="b">B</div>
        </DndGrid>
      )}
    </div>
  );
}
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `measureBeforeMount` | `boolean` | `false` | Delay rendering until the first measurement. Useful for SSR. |
| `initialWidth` | `number` | `1280` | Width value used before measuring. |

## Returns

| Value | Description |
|-------|-------------|
| `width` | Current container width. |
| `mounted` | `true` after the initial measurement when `measureBeforeMount` is enabled. |
| `containerRef` | Attach to the element you want to measure. |
| `measureWidth` | Trigger a manual measurement. |

<Note>
  `DndGrid` already measures width for you. Reach for this hook when you need
  the width value outside the grid.
</Note>