Loading documentation

ResponsiveDndGrid · dnd-grid

AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.

API
ResponsiveDndGrid

ResponsiveDndGrid

Breakpoint-aware grid layout component.

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