gridster.js
gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
A jQuery plugin for building draggable, rearrangeable grid layouts on web pages, designed for dashboard-style interfaces where users can drag panels, resize blocks across multiple columns, and add or remove widgets live.
Gridster.js is a jQuery plugin that lets you build draggable grid layouts on a web page. Instead of items sitting in fixed rows, you can arrange blocks that span multiple columns, drag them around to reorder them, and add or remove items from the grid while the page is live.
The core use case is building dashboard-style interfaces where a user can rearrange panels or widgets by dragging. Think of a customizable home screen where each card can be moved and resized across a column-based grid.
The project was created by Ducksboard and is available under the MIT license, meaning anyone can use or modify it freely. The README notes that maintenance is occasional rather than active. A community fork by one of the listed maintainers adds extra features like widget swapping and static widgets, and work was ongoing to merge those changes back into the main library.
The README is short and does not cover installation steps or code examples directly, but it links to the project website at gridster.net for full documentation.
Where it fits
- Build a customizable dashboard where users can drag and rearrange widgets by hand.
- Add a resizable multi-column grid layout to an existing jQuery web page.
- Create an interactive home screen with panels that span different numbers of columns.