jQuery Grid 'Em Plugin

This is a simple jQuery plugin that allows you to evenly apply horizontal spacing on a list of items across multiple rows on a page. Check out the demo site.

How to use this plugin

Both jQuery and Grid 'Em need to be included as a script on your page. Then simply target your list with gridem(). gridem() will apply the grid spacing to the direct children of the target. For example:

Say you had a list of items in an unordered list (ul).

<ul class="products">
  <li><div><img src="product.jpg"/><br/>Product title</li>
  <li><div><img src="product.jpg"/><br/>Product title</li>
  <li><div><img src="product.jpg"/><br/>Product title</li>
  ...
</ul>

Then you would simply call gridEm() as follows:

$(window).load(function() {
  $('.products').each(function() {
    $(this).gridEm();
});

In the above example, we iterated $('.product').each() which allows gridEm() to grid all lists on the page that have a class of product. For best results, it is recommended that you invoke gridEm() once the page has completely loaded as notified by $(window).load(). You can invoke gridEm() with $(document).ready() but the DOM might not be completely aware of all the page element dimensions yet.

Options

• minMargin — Minimum margin between items (in pixels) (default: 10)
• maxMargin — Maximum margin between items (in pixels) (default: 100)

For example:

$('.products').gridEm( { minMargin: 10, maxMargin: 50 } );

Compatibility

• IE7 and above
• Tested with the current versions of popular browsers: Firefox, Chrome, Safari and Opera

Limitations

This was created to display a grid of items which all items have the same width.

Contribute

Feel free to make improvements and submit pull requests.

Support

Please use the issues tracker on GitHub.