Simple jQuery Plugin for Dynamic Grid Layout - Grid.js

File Size: 8.62KB
Views Total: 2245
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin for Dynamic Grid Layout - Grid.js

Grid.js is a lightweight and fast jquery plugin that allows you to easily create a Dynamic Grid Layout for your website. The elements in the grid will be automatically arranged when the size of window is changed.

How to use it:

1. Include jQuery library and Grid.js

<script src=''></script> 
<script src='jquery.grid.js'></script> 

2. Markup

<ul id="grid">

3. Call the plugin with options

 var createGrid = (function() {
     var i = 80;
     while (--i) {
         var li = document.createElement('li'),
         w = 96 * (parseInt(Math.random() * 2) + 1) - 12,
         h = 60 * (parseInt(Math.random() * 5) + 1);
         li.innerHTML = i;
         li.className = 'item';
             width: w,
             height: h,
             lineHeight: h + 'px'

    $('#grid').grid({animate: true});


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.