A more flexible fluid CSS grid technique

We work on a lot of responsive/fluid web design projects - adapting our designs within a single codebase to make the best use of the device they are being viewed on.

One of the key parts of any responsive/fluid web build is its grid system. This allows us to organise content into distinct rows and columns, and then rearrange them when the screen size changes.

Fluid grid systems rely on percentages to calculate the width of each column - so if we had four even columns at 25% of the width of the page, then on a viewport size of 1000px a column would be 250px wide, on a 1400px viewport it would be 350px etc, scaling fluidly as the viewport is resized.

I’d like to share a technique that I’ve found very helpful whilst developing responsive/fluid websites. I first came across it in Paul Irish’s post Box Sizing Border Box FTW, and have since incorporated it into my own frontend framework…

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

This snippet changes the box model of the pages elements, so that CSS attributes such as padding and border are added inside the element, rather than adding it to the outside and increasing the overall width.

Using the example above, let’s say we wanted one of our 25% width columns to have 20px of padding at either side. At a viewport of 1000px using the default box model, this would make the column 290px wide, causing the fourth column in the row to fall off the end as there wouldn’t be space for it:

Using the box-sizing: border-box; technique, the padding is added inside the column, keeping its overall width at 250px but making the actual width of content 210px.

Using this technique allows us to keep our grid system consistent and easy to work with, but gives us the flexibility to deviate from the grid when we need to.

After all, isn’t flexibility what responsive design is all about?

~ mike blog