Gridstack.js

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!

Articles

Why use gridstack.js ?

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

• Check the package statistics on npmjs.org gridstack package and see the evolution of it.
• Check the gridstack rank on the 6 Best jQuery Layout Plugins 2020 article on formget.

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.