+
+
+
+ +

Basic Demo

+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +

Getting Started

+

+ Create your first interactive grid by copy-pasting the HTML+JS, as seen below... +

+
+

Code

+ 
+npm install gridstack
+
then in html:

+<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
+<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<style type="text/css">
+  .grid-stack { background: #FAFAD2; }
+  .grid-stack-item-content { background-color: #18BC9C; }
+</style>
+
+<div class="grid-stack"></div>
+
+<script type="text/javascript">
+  var items = [
+    {content: 'my first widget'}, // will default to location (0,0) and 1x1
+    {w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
+  ];
+  var grid = GridStack.init();
+  grid.load(items);
+</script>
+
+
+

+ ...and that's it! Drag, drop, and resize to your heart's content. + Looking for more complex examples? Check out the advanced example below, the links in the nav + bar, or our docs in GitHub +

+
+
+
+ +
+
+
+ +

Advanced Demo

+
+
+
+
+
+
+
+ +
+
+ Drop here to remove widget! +
+
+
+
+
+ +
+
+ Drag me into the dashboard! +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +

Why use it

+
+ +

Used by

+
+
+ + + + + +
+
+
+
+
+

+ ...and many, many others. +

+

+ Does your company use gridstack.js? We'd love to add your logo! + Come join our + + Slack community + + and let us know. +

+
+
+
+