ResponsiveDndGrid · dnd-grid

Import


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

Use ResponsiveDndGrid when you need breakpoint layouts. For a single layout, use DndGrid. If you already have a measured width, pass width directly.

Props

Core props

layoutsResponsiveLayouts

Breakpoint → layout map. Missing layouts are derived from the nearest larger breakpoint (default behavior).

childrenReactNoderequired

Grid items; each child key must match a layout item id.

Measurement

widthnumber

Optional container width in pixels. When provided, measurement is skipped.

measureBeforeMountbooleanDefault: true

Delay rendering until the container width is measured.

initialWidthnumberDefault: 1280

Width value used before measuring when rendering early.

containerPropsHTMLAttributes<HTMLDivElement>

Props applied to the measurement wrapper.

Responsive configuration

breakpointsBreakpoints

Breakpoint map, defaults to lg, md, sm, xs, xxs.

colsBreakpointCols

Column count per breakpoint.

gapResponsiveSpacingDefault: 10

Gap per breakpoint (number or spacing object).

containerPaddingResponsiveSpacing | nullDefault: null

Padding per breakpoint (or null to use gap).

defaultLayoutsResponsiveLayouts

Uncontrolled initial layouts per breakpoint.

compactorCompactor

Compaction strategy used for layout generation and collisions.

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 breakpoint layout changes.

onWidthChange(width, gap, cols, padding) => void

Fires on width or breakpoint configuration changes.

Grid configuration & behavior

ResponsiveDndGrid supports the same grid configuration, behavior, accessibility, and styling props as DndGrid (e.g. rowHeight, draggable, resizable, autoSize, slotProps, and callbacks).