Scale
Keep drag and resize maths correct when the grid is visually scaled with CSS transforms in this scale-aware dnd-grid React grid layout example.
How it works
When a grid sits inside a CSS transform, pointer coordinates no longer match layout coordinates and drags drift away from the cursor. The transformScale prop tells the grid what factor to divide by so the maths lines up again.
Set it to the same scale you applied in CSS. This comes up in zoomable canvases, presentation surfaces, and thumbnail previews of a larger board — anywhere the grid is rendered at something other than its natural size.
Related examples
- Portal — Render the grid through createPortal into a separate DOM container while keeping drag and resize behaviour intact in this dnd-grid React portal example.
- Bounded — Keep grid items inside the grid bounds so they cannot be dragged or resized outside the container in this bounded dnd-grid React layout example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.
- Responsive layout — Define breakpoint-specific layouts that adapt to the container width so the grid reflows responsively across screen sizes in this dnd-grid React example.