Building better grid systems

Written by Harry Roberts on CSS Wizardry.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

With every grid system that gets released—and there are a lot now—I notice the same issue with nigh on every one of them; handling the extra margin/gutter on the last <div>.

N.B. This post is about the HTML and CSS that powers grid systems, rather than the columns, construct, system and layout itself.

The problem

If you have a grid system where each grid module is defined with a class of, say, .grid, you might have some CSS like this:

.row{
    width:940px;
    overflow:hidden; <span class="code-comment">/* This is just for brevity. Please use a better clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */</span>
    clear:both;
}

.grid{
    float:left;
    margin-right:20px;
}

...

.col-4{
    width:220px;
}

...

The most important thing to note is that every .grid has a margin-right of 20px, so—in a 16 column 940px grid system—4 × .col-4 actually equals 960px (4 × (220px + 20px)). This is 20px (or one margin) bigger than your wrapper.

The formula for a complete system is:

f = n(c) + n-1(g)

Where:

• f = full row
• n = number
• c = columns
• g = gutters

Basically, a full row comprises of n columns and n-1 gutters; we want one less gutter than we have columns. We need to lose a gutter somehow.

The current solution(s)

The simplest and most common solution is to use a class of .last or .end on the last or end grid column to remove its margin:

.end{
  margin:0;
}

This would give us:

<div class="row">

  <div class="grid  col-4">
    <p>One box plus one gutter</p>
  </div>

  <div class="grid  col-4">
    <p>One box plus one gutter</p>
  </div>

  <div class="grid  col-4">
    <p>One box plus one gutter</p>
  </div>

  <div class="grid col-4  end">
    <p>One box only</p>
  </div>

</div>

This solves the problem, but it means the developer has to remember to add that class every time they construct a row of grids.

Another problem is that if a programmer needs to dynamically display, say, a series of images in a grid system, they need to do some scripting to say ‘if this is the x column then add a class of .end’. Not a massive overhead, but an overhead nonetheless.

The other current solution

Another solution I’ve seen recently is used on Twitter’s Bootstrap framework and a few other places. This solution is a little more elegant, but still not very robust.

It works by removing the margin-right:20px; from .grid and applying it as a margin-left instead. Then—using the dynamic :first-child pseudo-selector (:first-child is used as it has better browser support than :last-child)—you can target the first div in a row and remove its margin, thus:

.grid:first-child{
  margin:0;
}

This keeps your markup clean as you don’t have to include the special class and also means your devs don’t have to take the extra class into consideration, However, this is not without its own problems…

The smallest problem with using this method is that the :first-child selector is quite an inefficient one, but selector performance is another post for another time.

The most significant drawback is that :first-child only ever matches one grid in the row, meaning you can’t have multiple-row grid constructions. Take the following (crude) representations…

• Tildes (~) and broken bars (¦) denote the .row div

• Hyphens (-) and pipes (

  ) denote .grid divs

• x denotes :first-child
• ! denotes borked

:first-child works out fine here as we only have a one-row-deep layout. The first div is the only flush-left div:

+~~~~~~~~~~~~~~~~~~~~~~~~~+
¦ +---+ +---+ +---+ +---+ ¦
¦ | x | |   | |   | |   | ¦
¦ +---+ +---+ +---+ +---+ ¦
+~~~~~~~~~~~~~~~~~~~~~~~~~+

In this following example however, :first-child will not work as intended as there are two flush-left divs but only one of them is the first child. This is where this method breaks, and more-than-one-row-deep layouts are not uncommon:

+~~~~~~~~~~~~~~~~~~~~~~~~~+
¦ +---+ +---+ +---+ +---+ ¦
¦ | x | |   | |   | |   | ¦
¦ +---+ +---+ +---+ +---+ ¦
¦ +---+ +---+ +---+ +---+ ¦
¦ | ! | | ! | | ! | | ! | ¦
¦ +---+ +---+ +---+ +---+ ¦
+~~~~~~~~~~~~~~~~~~~~~~~~~+

So :first-child kinda works, but not well enough. The solution…?

The solution

In short, the solution is to not remove that extra margin, but to hide the effects of it.

Essentially the real problem is that the combined width of a full row is one gutter wider than our container, right? Well what we need to do is make our container one gutter wider but disguise the extra width by using a negative margin equal to one gutter.

This can be a bit of a headf**k so bear with me. What we need to do is apply the gutter as a margin-left on the .grid, as Twitter do, but we’re not going to remove any of them. No pseudo-classes, no special classes, nothing. It’s gonna stay there.

We can hide the effects/breakage caused by the extra gutter by giving the container .row a width of all the columns and gutters combined and then a negative margin-left equal to one gutter to pull everything back across again, soaking up the effects of the margin-left.

Our 940px .row now becomes 960px wide to allow for the fact we are no longer removing the end gutter, then we pull it all back over by 20px to remove the visual effects of that extra width, thus:

.row{
  width:960px;
  margin-left:-20px;
  overflow:hidden;
  clear:both;
}

.grid{
  float:left;
  margin-left:20px;
}

...

.col-4{
  width:220px;
}

...

This way we can have multiple-row constructions and never have to remember the special .end/.last classes.

To see this technique in action head on over to inuit.css and poke about the page’s grid system using Firebug or similar. It’s most apparent in the list of features…

Roll your own…

To transfer this technique, you only need to know three things:

• The number of columns in your grid system
• The width of one column
• The width of one gutter

With these, your formula is simply:

.row{
  width: (number of columns * width of one column) + (number of columns * width of one gutter) px;
  margin-left: -width of one gutter px;
  overflow:hidden;
  clear:both;
}

.grid{
  float:left;
  margin-left: width of one gutter px;
}

So let’s create one using 12 columns that are 50px wide with a gutter of 25px:

.row{
  width:900px;
  margin-left:-25px;
  overflow:hidden;
  clear:both;
}

.grid{
  float:left;
  margin-left:25px;
}

Plugging in our numbers gives us a grid system that doesn’t require special classes, is totally flexible (you can move columns without needing to move a class around), and gives you more varied layouts (multiple rows).

I employ this technique on both inuit.css and Fluid Grids and it’s proved perfect so far. Robust, portable and lean.

N.B. All code can now be licensed under the permissive MIT license. Read more about licensing CSS Wizardry code samples…

By Harry Roberts

Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.