Some months ago a friend of mine asked me to help him reaching a grid template to include in a wordpress project he was working on. At the very first, we thought about using Twitter Bootstrap or some sort of templating css+js library. What was really annoying was the quantity of unnecessary code, for us, we were including to make it work.

Then I decided to make it possibly using only css3, even without javascript. Actually it was not necessary to be that strict with myself at all, but I like this kind of challenges. Plus, the idea of not using javascript (at least for default browser configuration) was really intriguing me.

NOTE: pay attention to the absence of a space between the scatolo divs. It’s really important. Otherwise you’ll note a white space between the boxes (an hour of debugging…).

The CSS:

The layout is set to display 4 boxes on full width and then scaling down to 3, 2 and 1 column, depending on window width.
I’ve used the magintastic @media properties to achieve this behaviour.
The other key that makes everything works is the

display: inline-block

of scatolo divs, which will make the boxes to stay close to each other, displayed in line.
And yes, no float divs around (ooooh yeah!).