explaingit

ducksboard/gridster.js

★ 5,982JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

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.

Mindmap

mindmap
  root((Gridster.js))
    What it does
      Draggable grid layouts
      Dashboard interfaces
    Features
      Multi-column blocks
      Live add or remove
      Drag to rearrange
    Tech
      JavaScript
      jQuery plugin
    Audience
      Web developers
      Dashboard builders
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a customizable dashboard where users can drag and rearrange widgets by hand.

USE CASE 2

Add a resizable multi-column grid layout to an existing jQuery web page.

USE CASE 3

Create an interactive home screen with panels that span different numbers of columns.

Tech stack

JavaScriptjQuery

Getting it running

Difficulty · easy Time to first run · 30min

Requires jQuery as a dependency, full documentation is on the external project website, not in the README.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me how to add gridster.js to a jQuery page and create a 4-column draggable grid with three widgets of different sizes.
Prompt 2
Using gridster.js, how do I dynamically add and remove widgets from a grid while the page is live without reloading?
Prompt 3
How do I serialize the current widget positions in gridster.js so I can save the layout to a database and restore it on the next page load?
Prompt 4
Show me how to initialize gridster.js so columns have fixed widths and widgets snap to the grid when dragged.
Open on GitHub → Explain another repo

← ducksboard on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.