Grid Layout PlusA draggable and resizable grid layout for Vue 3
Drag, resize, responsive layouts, collision handling, and configurable positioning in one Vue 3 component.
Skip to content
What do you need?
01 / BUILDBuild a layoutInstall the package, bind
v-model:layout, and render a working grid.Read the guide 02 / EXPLOREFind an exampleBrowse by task and copy the smallest example that matches your case.Browse examples 03 / REFERENCECheck the APILook up component properties, defaults, types, and events.Open API reference Choose how the grid should behave
The layout stays in your application state. Configure responsive behavior, collision handling, external drops, and positioning as needed.
Responsive layoutsChange columns and item positions at each breakpoint.Collision controlPush items aside, reject collisions, or allow overlap.Drag and dropMove existing items or drag new items into the grid.Position strategyChoose between transform-based and absolute positioning to suit your rendering requirements.Styling hooksStyle grid lines, placeholders, backgrounds, and item states.Composable APIUse the layout engine without the built-in component markup.