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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.coolgrid.js"></script>

2. Markup html structure

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

...

</ul>
</section>

3. The CSS for this example

<style>
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;
}
</style>

4. The javascript

<script>
$(window).load(function(){
  options = {
    autoResize: true,
    container: $('.items'),
    offset: 5,
    item_width: 210
  }

  $('.item').CoolGrid(options);
});
</script>

---

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