Styling

Customise the look and feel of your grid.

Required styles

The @dnd-grid/react/styles.css file includes layout and interaction styles. Always import it.


import "@dnd-grid/react/styles.css";

CSS variables

dnd-grid uses CSS variables for theming. Override them in global CSS or on a grid container.


:root {
  --dnd-grid-radius: 24px;
  --dnd-grid-placeholder-bg: rgba(0

Published with Edda

Variable	Default	Description
`--dnd-grid-radius`	`24px`	Border radius for grid items and the placeholder.
`--dnd-grid-placeholder-bg`	`rgba(0,0,0,0.012)`	Background colour of the drop placeholder.
`--dnd-grid-handle-bg`	`#ffffff`	Colour of the default resize handle.


.dnd-grid-item-content {
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.dnd-grid-item.dnd-draggable-dragging {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 10;
}


<DndGrid
  animationConfig={{
    springs: {
      rotation: { stiffness: 120, damping: 12 },
      scale: { stiffness: 600, damping: 35 },
      position: { stiffness: 240, damping: 24 },
    },
    shadow: {
      dragStartDuration: 160,
      dragStopDuration: 120,
    },
  }}
/>

Styling

Required styles

CSS variables

Styling

Required styles

CSS variables

Reference

Item styles

State classes

Custom resize handles

Reduced motion

Animation config