Adaptive Grid: all css fluid grid layout demo.

You can match the classis to fill the space like so:

.fill

.fourFifth

.oneFifth

.threeQuarter

.oneQuarter

.twoThird

.oneThird

.half

.half

.oneThird

.twoThird

.oneQuarter

.threeQuarter

.oneFifth

.fourFifth

or use multiple istances of the same class:

.half

.half

.oneThird

.oneThird

.oneThird

.oneQuarter

.oneQuarter

.oneQuarter

.oneQuarter

.oneFifth

.oneFifth

.oneFifth

.oneFifth

.oneFifth

or combine different classes:

.oneQuarter

.half

.oneQuarter

.twoThird

.oneThird

.oneThird

.oneQuarter

.oneThird

You can also add the empty class to a div to get the css visibility : hidden property effect.

NOTE: resize your screen (width < 700px ) to trigger media queries and see the empty class magically disappear.

.oneQuarter

.oneQuarter

.oneThird .empty

.twoThird

.oneThird

.oneFifth

.oneThird

.fourFifth

.oneFifth

It works even with encapsulation:

.oneQuarter

.half

.oneQuarter

.half

.half

.half

.half

.half

.half

easy - fast - handy... Hope you enjoy!

view on github

download zip