A comprehensive, but concise, fluid 6 column grid system.

Each column's class name is prefixed with c, for column, but really because CSS class names cannot begin with a number. The digit that follows indicates which column to place the element in, not the span. To create a span from one column to another simply use a class name containing the start column and the end column separated by a dash (-).

<div class="cf">
	<div class="c1">15%</div>
	<div class="c2">15%</div>
	<div class="c3">15%</div>
	<div class="c4">15%</div>
	<div class="c5">15%</div>
	<div class="c6">15%</div>
	<div class="c1-c2">32%</div>
	<div class="c3-c4">32%</div>
	<div class="c5-c6">32%</div>
	<div class="c1-c3">49%</div>
	<div class="c4-c6">49%</div>
	<div class="c1-c6">100%</div>
</div>

By using this class naming scheme, both clearing and offsets can be handled automagically.

<div class="cf">
	<div class="c2">15%</div>
	<div class="c5">15%</div>
	<div class="c3-c4">32%</div>
	<div class="c2">15%</div>
	<div class="c5">15%</div>
</div>

The [attr|="name"], [attr$="name"], and adjacent sibling (+) selectors are not supported by Internet Explorer 6.

• A better Photoshop grid for responsive web design —Elliot Jay Stocks
• Gridset (offsets and clearing)
• Negative Grid (negative margin)