Demos

Check out the simple demo and the advanced demo. Note: they have not been tested with Internet Explorer™ 7 and below.

Download

The minified file is less than 2KB. The files can be found on the GitHub repository.

How To Set It Up

Start with a float layout.

<div id="container">
	<div class="item">…</div>
	<div class="item">…</div>
	<div class="item">…</div>
	<div class="item">…</div>
	…
</div>

.item {
	float: left;
	width: 25%;
}

Add jQuery and the Wrecker script.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/path/to/jquery.wrecker.min.js"></script>

It is recommended that you specify itemSelector, maxColumns and responsiveColumns.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function(){
	$("#container").wrecker({
		// options
		itemSelector : ".item",
		maxColumns : 4,
		responsiveColumns : [
			// windowMaxWidth : columns
			// windowMaxWidth order and values should match those in your responsive CSS
			{1024 : 3},
			{800  : 2},
			{640  : 1}
		]
	});
});

How It Works

The previous layout is converted into a display:table layout where the responsive column span is handled by dynamically adding and removing <div> “rows” around the “cells”. Equal-height rows are handled automatically by the browser (very fast). Responsive column widths are handled with standard CSS.

Single-column layouts and those with JavaScript disabled will be served the float layout.

Important Notes

Due to the nature of display:table layouts, there are a few possible issues:

1. There is currently no known colspan/rowspan equivalent in CSS
2. max-width is ignored on the main element (#container in the above example)
3. margin values will be ignored on the cells. You will need to do something like Inside-Only CSS Table border-spacing. Check out the advanced demo.

Other Functions

.wrecker("reload");

Recalculates the grid. Useful for adding new items.

.wrecker("destroy");

Removes Wrecker functionality completely. Returns element back to pre-initialized state.