Troubleshooting

The grid is empty or items do not render

• Ensure every child key matches a layout item id.
• Ensure the grid container has a non-zero width (block-level or explicit size).
• Make sure each layout item has w and h greater than 0.

Dragging or resizing does not work

• Check draggable and resizable on the grid and items.
• static: true disables drag and resize.
• Make sure dragHandle and dragCancel selectors match your DOM.

Resize handles are missing

• Import @dnd-grid/react/styles.css.
• Verify resizeHandles is not empty and the item is resizable.

Layout jumps on hydration

• Keep measureBeforeMount enabled (default) to wait for measurement.
• If you render early, set initialWidth to an expected container width.
• Pass width directly when you already know the width.

Auto-scroll does not trigger

• Ensure the scroll container has overflow: auto or scroll.
• Pass autoScroll options to adjust threshold and activator.
• Use AutoScrollActivator.DraggableRect if pointer coordinates are unreliable.

Items overlap unexpectedly

• Use a non-overlap compactor like verticalCompactor or horizontalCompactor.
• Avoid allowOverlap variants unless you want stacking.
• Set preventCollision if you want drag moves to be blocked.