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.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 {width: 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!

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