# dnd-grid

Sitemap: https://blode.co/dnd-grid/docs/sitemap.xml
Full content: https://blode.co/dnd-grid/docs/llms-full.txt
Skills: https://blode.co/dnd-grid/docs/.well-known/skills/index.json

## Segments
- [Start](https://blode.co/dnd-grid/docs/llms/start.txt)
- [Concepts](https://blode.co/dnd-grid/docs/llms/concepts.txt)
- [API](https://blode.co/dnd-grid/docs/llms/api.txt)
- [Hooks](https://blode.co/dnd-grid/docs/llms/hooks.txt)
- [Patterns](https://blode.co/dnd-grid/docs/llms/patterns.txt)
- [Examples](https://blode.co/dnd-grid/docs/llms/examples.txt)

## Docs
- [Callbacks](https://blode.co/dnd-grid/docs/api-reference/callbacks.md): Event callbacks for drag, resize, and drop operations.
- [DndGrid](https://blode.co/dnd-grid/docs/api-reference/dnd-grid.md): Main grid layout component.
- [Layout item](https://blode.co/dnd-grid/docs/api-reference/layout-item.md): Layout item type reference.
- [API overview](https://blode.co/dnd-grid/docs/api-reference/overview.md): API reference for dnd-grid.
- [ResponsiveDndGrid](https://blode.co/dnd-grid/docs/api-reference/responsive-dnd-grid.md): Breakpoint-aware grid layout component.
- [Compactors](https://blode.co/dnd-grid/docs/concepts/compactors.md): Control how layouts pack and collide.
- [Constraints](https://blode.co/dnd-grid/docs/concepts/constraints.md): Enforce drag and resize rules.
- [Grid items](https://blode.co/dnd-grid/docs/concepts/grid-items.md): Working with grid items.
- [Layout](https://blode.co/dnd-grid/docs/concepts/layout.md): How the grid system works.
- [Styling](https://blode.co/dnd-grid/docs/concepts/styling.md): Customise the look and feel of your grid.
- [Allow overlap](https://blode.co/dnd-grid/docs/examples/allow-overlap.md): Let items stack without collision.
- [Aspect ratio constraints](https://blode.co/dnd-grid/docs/examples/aspect-ratio-constraints.md): Lock item resizing to a ratio.
- [Basic example](https://blode.co/dnd-grid/docs/examples/basic.md): Simple draggable and resizable grid.
- [Bounded](https://blode.co/dnd-grid/docs/examples/bounded.md): Keep items within grid bounds.
- [Compactor showcase](https://blode.co/dnd-grid/docs/examples/compactor-showcase.md): Switch between vertical, horizontal, and none.
- [Composition](https://blode.co/dnd-grid/docs/examples/composition.md): Render state-aware item content with useDndGridItemState.
- [Constraints](https://blode.co/dnd-grid/docs/examples/constraints.md): Plug in constraints and custom rules.
- [Drag from outside](https://blode.co/dnd-grid/docs/examples/drag-from-outside.md): Drop external items into the grid.
- [Dynamic add/remove](https://blode.co/dnd-grid/docs/examples/dynamic-add-remove.md): Add and remove items at runtime.
- [Headless wrapper](https://blode.co/dnd-grid/docs/examples/headless.md): Build a custom wrapper with useDndGrid.
- [Kitchen sink](https://blode.co/dnd-grid/docs/examples/kitchen-sink.md): A full-featured builder with external drag, selection, action bar, and edit panel.
- [Local storage](https://blode.co/dnd-grid/docs/examples/localstorage.md): Persist layout to local storage and restore on load.
- [Multiple instances](https://blode.co/dnd-grid/docs/examples/multiple-instances.md): Run several independent grids on one page.
- [Portal](https://blode.co/dnd-grid/docs/examples/portal.md): Render the grid into a portal container.
- [Resizable handles](https://blode.co/dnd-grid/docs/examples/resizable-handles.md): Items can be resized from all eight directions.
- [Responsive layout](https://blode.co/dnd-grid/docs/examples/responsive.md): Breakpoint layouts based on container width.
- [Scale](https://blode.co/dnd-grid/docs/examples/scale.md): Keep drag math correct when scaling the grid.
- [Static items](https://blode.co/dnd-grid/docs/examples/static-elements.md): Static items cannot be moved or resized.
- [Toolbox](https://blode.co/dnd-grid/docs/examples/toolbox.md): Move items between the grid and toolbox.
- [useContainerWidth](https://blode.co/dnd-grid/docs/hooks/use-container-width.md): Measure and track container width.
- [useDndGrid](https://blode.co/dnd-grid/docs/hooks/use-dnd-grid.md): Headless hook for building custom grid wrappers.
- [useDndGridItemState](https://blode.co/dnd-grid/docs/hooks/use-dnd-grid-item-state.md): Read the current item and interaction state.
- [useDndGridResponsiveLayout](https://blode.co/dnd-grid/docs/hooks/use-dnd-grid-responsive-layout.md): Manage responsive layouts and breakpoint state.
- [useEdgeScroll](https://blode.co/dnd-grid/docs/hooks/use-edge-scroll.md): Auto-scroll scroll containers while dragging near edges.
- [Introduction](https://blode.co/dnd-grid/docs/index.md): Drag-and-drop grid layout for React.
- [Installation](https://blode.co/dnd-grid/docs/installation.md): Install and use dnd-grid.
- [Introduction](https://blode.co/dnd-grid/docs/introduction.md): Drag-and-drop grid layout for React.
- [Server-side rendering (SSR)](https://blode.co/dnd-grid/docs/patterns/ssr.md): Server rendering and hydration tips for React grid layouts.
- [Troubleshooting](https://blode.co/dnd-grid/docs/patterns/troubleshooting.md): Fix common setup issues.