+
+

+ Demonstration +

+

Basic demo

+

+ Simple to use, configure, and customize. Drag and drop the items below + to try ! +

+ +
+
+
+
+
+

+ Code +

+

Getting started

+

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

+
npm install gridstack
+ +

+ Then, in your HTML file, include the following code... +

+
+<script src="node_modules/gridstack/dist/gridstack-all.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 +

+
+ +
+

+ Demonstration +

+

Advanced demo

+

+ A full control example with a trash can to remove widgets and a drag + in widget. +
+
+ More complex examples are available to demonstrate the full power of + gridstack.js. +
+ Drag and drop the items below to try! +

+
+
+ + + + + + +

+ Drag me into the dashboard! +

+
+
+ + + + + + + +

Drop here to remove widget!

+
+
+ +
+
+
+
+ +
+

+ Articles +

+

Why use gridstack.js ?

+

+ Find out why developers everywhere are choosing gridstack.js for their + projects. +

+ +
+
+

+ Companies +

+

Used by

+

+ Discover the companies and projects that trust gridstack.js for their + applications. +

+ +

...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. +

+
+