jquery.gridster

ui-component grid layout

jquery.gridster is a jQuery plugin that provides a drag-and-drop multi-column grid system. It allows users to freely place and resize widgets within a webpage.

Latest Ver 0.5.6

Homepage

Github

6,017

📢 jquery.gridster offers a grid layout tool that allows users to easily move and resize widgets within a webpage.

CDN Download

License: MIT

Asset Type :

View All Versions

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.with-extras.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.with-extras.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.css

https://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.5.6/jquery.gridster.min.css

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="gridster"><ul><li data-col="1" data-row="1" data-sizex="2" data-sizey="2">Item 1</li><li data-col="3" data-row="1" data-sizex="1" data-sizey="1">Item 2</li></ul></div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js" type="text/javascript"></script><script>$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });</script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.css" rel="stylesheet">

🧩 External JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>

⚙️ JavaScript
$(function(){ $('.gridster ul').gridster({ widget_base_dimensions: [100, 100], widget_margins: [10, 10] }); });