Basic Demo


1

2

Drag me!

4

5

6

7

8

9

10

11

Getting Started

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


Code


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css" />

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
    <div class="grid-stack-item-content">my first widget</div>
  </div>
  <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
    <div class="grid-stack-item-content">another widget!</div>
  </div>
</div>

<script type="text/javascript">
  $('.grid-stack').gridstack();
</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!

1

I can't be moved or dragged!

Drag me!

...but don't resize me!

4

5

6

7

8

9

10

11

Used by


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