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