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.

So, here is the final result (click on the picture for the DEMO):

Fluid Grid Layout

Fluid Grid Layout


Let’s have a look at the code (available on this GIT).


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!).


A little zooming effect to make it funny (and useful for my friend work) and it’s all done.

Again, the GIT and the DEMO.

Let me leave you with a question: what about make everything dirtier and achieve a super duper drag and drop?

Don’t forget to comment and share. All the code is under CC-BY-SA.

Have fun!



One Comment

Post a comment
  1. Syed Sami #
    January 21, 2014

    just one word….awesome! 😀

Leave a Reply

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS