Mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. Allows you to build draggable, responsive bootstrap v3-friendly layouts. It also has multiple bindings and works great with react, angular, knockout.js, ember and others.
Inspired by no-longer maintained gridster.js. Built with love.
Join gridstack.js on Slack: https://gridstackjs.troolee.com, and see demos section below
Table of Contents generated with DocToc
Please visit http://gridstackjs.com for a demo or check out these examples.
- jQuery (>= 1.8)
Array.prototype.find, andNumber.isNaN()for IE and older browsers.- Note: as of v0.5.4 We supply a separate
gridstack-poly.jsfor that (part ofgridstack.all.js) or you can look at other pollyfills (core.js and mozilla.org).
- Note: as of v0.5.4 We supply a separate
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 ofgridstack.all.js. If you wish to bring your own lib, include the individual gridstack parts instead of all.js
- Note: as of v0.5.4 we include this subset as
- (Optional) jquery-ui-touch-punch for touch-based devices support
- Using CDN (minimized):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/gridstack.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/gridstack.all.js"></script>- Using CDN (debug):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/gridstack.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/gridstack.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridstack@0.6.0/dist/gridstack.jQueryUI.js"></script>- or local:
<link rel="stylesheet" href="gridstack.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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 gridstackYou can also download source and build and use dist directory as well for latest non published code.
<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>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 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.
Documentation can be found here.
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
- AngularJS: gridstack-angular
- Rails: gridstack-js-rails
- ember: gridstack-ember
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:
- Change the
columngrid option when creating a grid to your number N
$('.grid-stack').gridstack( {column: N} );- include
gridstack-extra.cssif 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.6.0/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
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; }
}
}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.
View our change log here.
gridstack.js is currently maintained by Dylan Weiss and Alain Dumesny, originally created by Pavel Reznikov. We appreciate all contributors for help.