Grid Layout Plus

Version 2 Beta

Important

Grid Layout Plus v2 is currently in beta and includes breaking changes from v1.

Install the v2 beta:

pnpm add grid-layout-plus@beta

Version 2 introduces a controlled Layout model, explicit stylesheet imports, headless composables, and a DOM-free Core API.

If you are upgrading an existing project, read the Migration from v1 guide first. A Chinese migration guide is also available.

To remain on the stable v1 release:

pnpm add grid-layout-plus@^1

What is Grid Layout Plus?

Grid Layout Plus is a draggable and resizable grid layout system for Vue 3. It was originally migrated from Vue Grid Layout.

It is constructed with <script setup> and normalized TypeScript.

About Vue Grid Layout

What is Vue Grid Layout?

Vue Grid Layout is a grid layout system for Vue 2, like Gridster.

Heavily inspired by React Grid Layout.

Features

• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support
• Responsive

Documentation

Check out the online documentation here.

License

All in MIT license.