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)