Minimal jQuery Grid Layout Plugin - Cool Grid

File Size: Unknown
Views Total: 2143
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal jQuery Grid Layout Plugin - Cool Grid

Cool Grid is a simple and lightweight jQuery layout plugin that automatically resizes the layout elements by calculating each item's height.

How to use it:

1. Include jQuery library and jQuery Cool Grid on the web page

<script src=""></script>
<script src="jquery.coolgrid.js"></script>

2. Markup html structure

<ul class="items">
<li class="item"><img src="./images/noimage1.png" />
<li class="item"><img src="./images/noimage2.png" />
<li class="item"><img src="./images/noimage3.png" />



3. The CSS for this example

ul, li {
margin: 0;
padding: 0;
list-style: none;
.items {
position: relative;
margin: 0 auto;
display: block;
width: 650px;
.item {
border: 1px solid #dedede;
margin: 10px 0;
.item img {
display: block;
width: 180px;
height: auto;
padding: 10px;

4. The javascript

  options = {
    autoResize: true,
    container: $('.items'),
    offset: 5,
    item_width: 210


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