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 {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
...and many, many others.
Does your company use gridstack.js? We'd love to add your logo!
Come join our