A functional grid system in only 9 lines of CSS. Compatible with IE 7 and above!
Add any number of child div
elements to a .grid
and they will automatically form equal sized columns:
Either download the CSS file or copy the CSS code below to create the foundation of the grid:
.grid {
display: table;
table-layout: fixed;
width: 100%;
}
.grid > div {
display: table-cell;
vertical-align: top;
}
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
</div>
Which should result in this (styled for demonstration purposes):
And that's it! The .grid
element will act as a full-width row, and its direct children div
elements become flexible, class-agnostic, equal-width columns.
Create your own class for the div
column elements with the attribute vertical-align: top|middle|bottom;
to align your content. Make sure to nest your child class with .grid
for the attributes to properly cascade. By default the columns are aligned to the top.
.grid > .top {
vertical-align: top;
}
.grid > .middle {
vertical-align: middle;
}
.grid > .bottom {
vertical-align: bottom;
}
<div class="grid">
<div class="top">
...
</div>
<div class="middle">
...
</div>
<div class="bottom">
...
</div>
</div>
The code above will output the following:
How-tos for responsive grids and other cool stuff coming soon! Or you can figure it out yourself. :)