gridstack

What is gridstack?

Gridstack is a JavaScript library that helps you create dynamic, responsive, and draggable grid layouts. It is particularly useful for building dashboards, widgets, and other interactive web applications where users can customize the layout by dragging and resizing elements.

What are gridstack's main functionalities?

Draggable Widgets

This feature allows you to add draggable widgets to the grid. The code sample initializes a grid and adds a widget at position (0, 0) with a width and height of 2 units.

const grid = GridStack.init();
grid.addWidget('<div><div class="grid-stack-item-content">Widget 1</div></div>', {x: 0, y: 0, width: 2, height: 2});

Resizable Widgets

This feature allows you to add resizable widgets to the grid. The code sample initializes a grid and adds a resizable widget at position (1, 1) with a width and height of 2 units.

const grid = GridStack.init();
grid.addWidget('<div><div class="grid-stack-item-content">Widget 2</div></div>', {x: 1, y: 1, width: 2, height: 2, resizable: true});

Static Grid

This feature allows you to create a static grid where widgets cannot be dragged or resized. The code sample initializes a static grid and adds a widget at position (2, 2) with a width and height of 2 units.

const grid = GridStack.init({staticGrid: true});
grid.addWidget('<div><div class="grid-stack-item-content">Static Widget</div></div>', {x: 2, y: 2, width: 2, height: 2});

Saving and Loading Layouts

This feature allows you to save the current layout of the grid and load it later. The code sample demonstrates how to save the layout of a grid and then load it into another grid instance.

const grid = GridStack.init();
const layout = grid.save();
// Later, you can load the layout
const grid2 = GridStack.init();
grid2.load(layout);

Other packages similar to gridstack

muuri

Muuri is a JavaScript library for creating responsive, sortable, filterable, and draggable grid layouts. It offers more advanced sorting and filtering options compared to Gridstack but may require more configuration for basic grid functionalities.

packery

Packery is a JavaScript library for creating draggable and resizable grid layouts. It focuses on packing elements in the most efficient way possible, which can be useful for creating masonry-style layouts. However, it lacks some of the built-in features for saving and loading layouts that Gridstack offers.

interactjs

Interact.js is a JavaScript library for drag-and-drop, resizing, and multi-touch gestures. While it is more versatile and can be used for a variety of interactive elements, it requires more custom code to achieve the same grid functionalities that Gridstack provides out of the box.

README

gridstack.js

gridstack.js is a mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. gridstack.js allows you to build draggable, responsive bootstrap v3-friendly layouts. It also works great with knockout.js, angular.js, ember.

Join gridstack.js on Slack: https://gridstackjs.troolee.com

Table of Contents generated with DocToc

• Demo and examples
• Usage
  • Requirements
  • Install
  • Basic usage
  • Migrating to v0.3.0
  • API Documentation
  • Touch devices support
  • gridstack.js for specific frameworks
  • Change grid columns
  • Custom columns CSS
  • Override resizable/draggable options
• Changes
• The Team

Demo and examples

Please visit http://gridstackjs.com for a demo or check out these examples.

Usage

Requirements

• jQuery (>= 1.8)
• Array.prototype.find, and Number.isNaN() for IE and older browsers.
  • Note: as of v0.5.4 We supply a separate gridstack-poly.js for that (part of gridstack.all.js) or you can look at other pollyfills (core.js and mozilla.org).

Using gridstack.js with jQuery UI

• jQuery UI (>= 1.12.0). Minimum required components: Draggable, Droppable, Resizable (Widget, Mouse, core).
  • Note: as of v0.5.4 we include this subset as jquery-ui.js (and min.js) which is part of gridstack.all.js. If you wish to bring your own lib, include the individual gridstack parts instead of all.js
• (Optional) jquery-ui-touch-punch for touch-based devices support

Install

• Using CDN (minimized):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack.all.js"></script>

• Using CDN (debug):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack.jQueryUI.js"></script>

• or local:

<link rel="stylesheet" href="gridstack.css" />
<script src="gridstack.js"></script>
<script src="jquery-ui.js"></script>
<script src="gridstack.jQueryUI.js"></script>

• Using npm:

$ npm install gridstack

• Using bower:

$ bower install gridstack

You can also download source and build and use dist directory as well for latest non published code.

Basic usage

<div class="grid-stack">
  <div class="grid-stack-item">
    <div class="grid-stack-item-content">Item 1</div>
  </div>
  <div class="grid-stack-item" data-gs-width="2">
    <div class="grid-stack-item-content">Item 2 wider</div>
  </div>
</div>

<script type="text/javascript">
$(function () {
  $('.grid-stack').gridstack();
});
</script>

Migrating to v0.3.0

As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin was functionality was moved to a separate file.

To ensure gridstack continues to work, either include the additional gridstack.jQueryUI.js file into your HTML or use gridstack.all.js:

<script src="gridstack.js"></script>
<script src="gridstack.jQueryUI.js"></script>

or

<script src="gridstack.all.js"></script>

We're working on implementing support for other drag'n'drop libraries through the new plugin system.

API Documentation

Documentation can be found here.

Touch devices support

Please use jQuery UI Touch Punch to make jQuery UI Draggable/Resizable working on touch-based devices.

<script src="core-js/client/shim.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

<script src="gridstack.js"></script>

Also alwaysShowResizeHandle option may be useful:

$(function () {
  var options = {
    alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  };
  $('.grid-stack').gridstack(options);
});

If you're still experiencing issues on touch devices please check #444

gridstack.js for specific frameworks

• AngularJS: gridstack-angular
• Rails: gridstack-js-rails
• ember: gridstack-ember

Change grid columns

GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need 2 things if you need to customize this:

1. Change the column grid option when creating a grid to your number N

$('.grid-stack').gridstack( {column: N} );

1. include gridstack-extra.css if N < 12 (else custom CSS - see next). Without these, things will not render/work correctly.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.4/dist/gridstack-extra.css"/>

<div class="grid-stack grid-stack-N">...</div>

Note grid-stack-N class was added, and extra CSS.

gridstack-extra.css (and gridstack-extra.min.css) defines CSS for grids with custom [1-12] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).

See example: 2 grids demo with 6 columns

Custom columns CSS

If you need > 12 columns or want to generate the CSS manually (else see above) you will need to generate CSS rules for .grid-stack-item[data-gs-width="X"] and .grid-stack-item[data-gs-x="X"].

For instance for 3-column grid you need to rewrite CSS to be:

.grid-stack-item[data-gs-width="3"]  { width: 100% }
.grid-stack-item[data-gs-width="2"]  { width: 66.66666667% }
.grid-stack-item[data-gs-width="1"]  { width: 33.33333333% }

.grid-stack-item[data-gs-x="2"]  { left: 66.66666667% }
.grid-stack-item[data-gs-x="1"]  { left: 33.33333333% }

For 4-column grid it should be:

.grid-stack-item[data-gs-width="4"]  { width: 100% }
.grid-stack-item[data-gs-width="3"]  { width: 75% }
.grid-stack-item[data-gs-width="2"]  { width: 50% }
.grid-stack-item[data-gs-width="1"]  { width: 25% }

.grid-stack-item[data-gs-x="3"]  { left: 75% }
.grid-stack-item[data-gs-x="2"]  { left: 50% }
.grid-stack-item[data-gs-x="1"]  { left: 25% }

and so on.

Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, #81 and @StefanM98, #868) and you can use sites like sassmeister.com to generate the CSS for you instead:

.grid-stack > .grid-stack-item {

  $gridstack-columns: 12;

  min-width: (100% / $gridstack-columns);

  @for $i from 1 through $gridstack-columns {
    &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
    &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
    &[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
    &[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
  }
}

Override resizable/draggable options

You can override default resizable/draggable options. For instance to enable other then bottom right resizing handle you can init gridstack like:

$('.grid-stack').gridstack({
  resizable: {
    handles: 'e, se, s, sw, w'
  }
});

Note: It's not recommended to enable nw, n, ne resizing handles. Their behaviour may be unexpected.

Changes

View our change log here.

The Team

gridstack.js is currently maintained by Dylan Weiss and Alain Dumesny, originally created by Pavel Reznikov. We appreciate all contributors for help.