The problem
Having tried many existing approaches, a lot of them seem a bit cumbersome and you end up re-defining a lot of CSS over and over as you go up through the breakpoints. This is especially true if you have percentage gutters – 10% of a mobile phone is a lot smaller than 10% of a desktop monitor. Nesting grids is also difficult, as you end up having to do all sorts of calculations to make gutters equal. Things are made easier with preprocessors Less and Sass able to do those calculations for you, but all those numbers seem a bit overkill.
My solution
I have used the CSS property box-sizing to create a solution that allows for fixed gutters (ems/rems) mixed with fluid columns. The distance between columns will remain equal at every breakpoint, in relation to the base font-size.
Columns are defined by proportion e.g. one half, one third, two thirds and can be easily re-used as many times as you like, even when nested. I have also added a CSS-only fallback for IE7 and below.
A shout must go out to Harry Roberts for pointing me in the right direction with the idea!
How it works
There is no class="first" to add to any of your columns because the gutter on the first column has been negated like so:
.grid-wrap {
margin-left: -3em; /* the same as your gutter */
overflow: hidden;
clear: both; }
.grid-col {
float: left;
padding-left: 3em; /* this is your gutter between columns */
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Classes are then used on each column to determine which proportion is taken at which breakpoint:
Column 1
Column 2
In this example, each grid-col starts life as a single column. The class bp1-col-one-half means that column becomes one-half at breakpoint 1. bp2-col-two-thirds means it becomes two-thirds at breakpoint 2. And so on.
It’s that simple, one grid system, one set of classes, wherever you want!
bp2-col is simply a namespace / prefix for that breakpoint. You can call these whatever you like but I prefer to use numbers rather than being stuck to a device e.g. tablet-col.
Internet Explorer
Obviously IE8 and below does not support @media and IE7 and below does not support box-sizing. But fear not, I’ve added an IE-specific stylesheet which repeats everything that appears inside a media query (for IE8) and creates a slightly modified grid for IE7 and below. Both receive a fixed-width 960px wide container as these browsers will be used on desktop machines.
What’s included
Examples of 6 different grid configurations including blocked, nested, and one with smaller gutters (just by adding a single class to .grid-wrap). Sass files are provided which makes it far easier to compile your grid by including one mixin per breakpoint and then repeating each one in ie.scss.
Give it a try and if you have any comments, questions or put the grids to use anywhere — let me know below or hit me up on Twitter.