Proportional Grids

10th July 2012

I’ve been working with responsive design for a year or two now, and one thing that has always been a bit of an issue is flexible grids. It’s obvious that as screen size gets larger, layout must change. How do you best handle that?

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 break points. 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 fixedgutters (ems/rems) mixed with fluid columns. The distance between columns will remain equal at every break point, 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.

Check out the demo

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 break point:

<div class="grid-wrap">
    <div class="grid-col mq1-col-one-half mq2-col-two-thirds">
        <p>Column 1</p>
    </div>
    <div class="grid-col mq1-col-one-half mq2-col-one-third">
        <p>Column 2</p>
    </div>
</div>

In this example, each grid-col starts life as a single column. The class mq1-col-one-half means that column becomes one-half at break point / media query 1. mq2-col-two-thirds means it becomes two-thirds at break point / media query 2. And so on.

It’s that simple, one grid system, one set of classes, wherever you want!

mq2-col is simply a namespace / prefix for that break point. 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 break point and then repeating each one in ie.scss.

Give it a try in and if you have any comments or questions, let me know below or hit me up on Twitter.

Download on Github

---

Source: http://builtbyboon.com/blog/proportional-grids