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 overview
API reference for dnd-grid.
| Component | Description |
|---|---|
DndGrid | Main grid layout component |
ResponsiveDndGrid | Breakpoint-aware responsive grid |
Most apps should start with DndGrid for single-layout grids and
ResponsiveDndGrid for breakpoint layouts. Use
useDndGrid when you need a custom wrapper or want to
control rendering.
Both components measure their container width automatically (or accept a
width prop when you already know it).
Also exported: GridItem and ResizeHandle.
| Hook | Description |
|---|---|
useContainerWidth | Measure container width with ResizeObserver |
useDndGrid | Headless hook for building custom grid wrappers |
useDndGridResponsiveLayout | Manage responsive breakpoints + layout state |
useDndGridItemState | Access item layout and interaction state |
useEdgeScroll | Auto-scroll while dragging near scroll edges |
| Type | Description |
|---|---|
Layout | Array of layout items (LayoutItem[]) |
LayoutItem | Position and size of a single grid item |
ResponsiveLayouts | Breakpoint → layout map |
Compactor | Pluggable compaction strategy |
LayoutConstraint | Drag/resize constraint definition |
GridDragEvent | Event object for drag callbacks |
GridResizeEvent | Event object for resize callbacks |
@dnd-grid/react also exports:
useOptionalDndGridItemState and useReducedMotioncreateLayoutEngine and layout engine types for headless usagelayoutSchema, layoutItemSchema, and validateLayout use Zod to validate
layouts at runtime. DndGrid and useDndGrid also expose a validation prop
(default: enabled in dev, disabled in production) to fail fast on bad layouts.
Validation adds runtime work and bundle weight, so keep it off in hot paths if
you do not need it.
Common classes you can target:
| Class | Element |
|---|---|
.dnd-grid | Grid container |
.dnd-grid-item | Each grid item |
.dnd-grid-item-content | Non-placeholder grid items |
.dnd-grid-placeholder | Placeholder during drag/resize |
.dnd-draggable-dragging | Item currently being dragged |
.resizing | Item currently being resized |
<DndGrid
layout={layout}
cols={12}
rowHeight={150}
onLayoutChange={(layout) => {}}
>
{children}
</DndGrid><ResponsiveDndGrid
layouts={layouts}
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
>
{children}
</ResponsiveDndGrid>Import the required CSS:
import "@dnd-grid/react/styles.css";