Steven Vachon

wRECkeR: Responsive Equal-Height Columns and Rows

0 comments

Wrecker is a dynamic layout plugin for jQuery that achieves equal-height rows in a grid layout. Similar to a float layout in that excess “cells” are moved to the following “row”. However, unlike, in that columns line up vertically and the cells of each row are equal in height based on their contents, just like a <table>. No static heights required.

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.



Comments

Top

Leave a Reply

Comments welcome! Name & email required; email always kept private. Please use basic markup. Wrap code with <code> tags.