gridstack.js

ui-component layout responsive

gridstack.js is a jQuery plugin designed for creating widget layouts. It supports draggable and resizable widgets, allowing for flexible arrangement within a grid. It also supports responsive design, adapting automatically to different screen sizes.

Latest Ver 11.3.0

Homepage

Github

7,905

📢 gridstack.js is a jQuery-based library for draggable and resizable widget layouts.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-all.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.min.js

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-extra.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.min.css

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-base-impl.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-draggable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-droppable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-element.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-manager.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable-handle.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-resizable.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/dd-touch.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack-engine.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/gridstack.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/types.d.ts

https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/11.3.0/utils.d.ts

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<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">Item 1</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">Item 2</div>
  </div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/1.1.2/gridstack.all.js"></script>

⚙️ JavaScript
$(function () {
  $('.grid-stack').gridstack();
});