Building better grid systems

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; This is just for brevity. Please use a better clearfix: http://nicolasgallagher.com/micro-clearfix-hack/
  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:

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…

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

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.

By Harry Roberts on Tuesday, August 23rd, 2011 in Web Development. Tags: , , | 20 Comments »

+

20 Responses to ‘Building better grid systems’

  1. Luke Connolly said on 23 August, 2011 at 7:58 pm

    Hey Harry,

    I am making this comment to find out what’s bad about a method I’ve been playing with… not to suggest it as a better solution.

    Typically, if I’m trying to build a grid that’s totally modular like this, I figure out what the width of my gutters will be. Then, for each grid DIV, I add a margin-left and margin-right equal to HALF of that gutter measure. Whenever two DIVs are up next to each other horizontally, their combined “half gutter” margins equal one full gutter measure. I’m not sure if this makes sense, but it would be easy enough for me to put together a quick demo.

    Interested to hear your thoughts.

  2. Harry Roberts said on 23 August, 2011 at 8:09 pm

    @Luke: I get what you mean, yeah. If I’m totally honest I’ve never actually used that method, but it does require 2+ <div>s to work, whereas with putting the full gutter on each you can have them working standalone :)

  3. Martin Balfanz said on 23 August, 2011 at 9:22 pm

    @Harry: Luke’s version does work, even with 1 div.

    Anyway, the problem with both of your solutions is grids within other grids. Let’s say you divide your page into main-content and sidebar, and you want 2 columns inside your main-content, you end up treating them special or break the grid. I didn’t find an elegant solution for that yet, so I need an extra class (or mixing in my case) again to remove some margin :(

  4. Ionut said on 24 August, 2011 at 8:44 am

    What about that overflow hidden that cuts divs that need tot pop-out of the grid? DId u think about changing it to the method with the :after pseudo class?
    And also related to what Martin said what if u need columns inside columns, how do you solve that?

  5. Harry Roberts said on 24 August, 2011 at 9:14 am

    @Ionut: The overflow method is not the point of this post, I’d use a clearfix but that’d just pollute the actual useful CSS of the post. Also columns in columns is no small job and not one that this post aims to solve…

  6. Jon Sykes said on 24 August, 2011 at 12:31 pm

    You could use div:nth-child(4n+0) to ensure every 4th item doesn’t have a right margin?

  7. Jim Ramsden said on 24 August, 2011 at 12:41 pm

    Following on from what you’ve just said above Harry, I don’t think the ‘columns problem’ is going to be solved with a post or indeed a hundred of them.

    Your post title read “Building better grid systems” and while your approach is slightly more semantic, I don’t think ‘better’ can achieved with a negative margin hack.

    As you mention in your opening paragraph there are a lot of grid systems popping up, (the newer ones consider the extra development for adaptive layouts) and with there being so many, with no perfect solution, this points to the fact that the problem lies is in the Syntax itself.

    We need an update to CSS that takes the same approach as HTML5 did – ‘paving the cow paths’. That way we’ll have all the right tools for the job, making frontend dev easy-peasy and giving us more time to worry about the bit the user sees.

    Updating CSS isn’t going to be a straight forward task but people are already considering a new approach – checkout Mark Boulton’s recent post – Rethinking CSS Grids

  8. Harry Roberts said on 24 August, 2011 at 1:02 pm

    @Jim: This post does solve the problem, though.

    Also, negative margins (or this technique) are not hacks, they’re solid and supported solutions that are better than solutions such as .end. There’s nothing hacky about this technique…

    CSS is changing and we have loads more layout techniques upcoming, but until that time we need to solve the problems with solutions such as this.

  9. Chris Robinson said on 24 August, 2011 at 4:25 pm

    Instead of having all the margin on the left to create the gutter, why not do 10px on the left and right — this way if you have 14/50px columns with 10px on either side you come to a total width of 980, lose the extra 10 on the first and last and you end up at 960px without any extra markup.

    Same goes with 13/60px columns + 10px left/right margin = 1040 – 20 = 1020

  10. Houston Web Designer said on 24 August, 2011 at 4:25 pm

    I was just working on a grid system for a website I’m currently working on, and this is awesome and I could use this technique. THANKS

  11. Harry Roberts said on 24 August, 2011 at 6:45 pm

    @Chris: This method requires two grid columns in order to make one gutter. This isn’t as flexible or portable as tethering one gutter to one column.

    Say for example you have a fluid block of text into which you wish to insert a 4-column-wide image as a standalone column, this would not work as it only takes half a gutter with it.

    Cheers,
    H

  12. Vladimir Carrer said on 25 August, 2011 at 12:51 pm

    In my framework The Golden Grid http://code.google.com/p/the-golden-grid/ I resolved this issue in this way: max container width = max column width + gutter width or 960px + 10px = 970px. Demo http://www.allapis.com/The-Golden-Grid/golden2.html

  13. John Darling said on 25 August, 2011 at 9:07 pm

    Not a bad idea. I typically have used the .last class in the past. It is a pain to have to add it at the end though. I have also used the :first-class psuedo class but then you still have to worry about complete browser support. I think many people steer away from negative margins, but we have those values for a reason, right?

    I say this is a decent solution to a very common problem.

  14. korbinian said on 28 August, 2011 at 8:12 pm

    thx for the input. i implemented this method in my personal grid framework: https://github.com/korbinian/Fundament

    your arguments are reasonable, at least this solution simplifies the dynamic grid-generation with sass a bit. i used to add margin-right: 0 to every :last-child of the columns, which works fine, but generates css overhead.

  15. Tim said on 2 September, 2011 at 3:23 am

    I love the idea of this, but I’m not seeing how this solves the issue.

    Just take a look at this screenshot and you’ll see my issue. This is using the fluid css:

    http://www.tstr.co.uk/uploads/inuit.png

    All the divs are inside the wrapper. Using the fixed CSS solves the problem, but using this in a WordPress theme where there is the possibility of a sidebar means I must use fluid CSS…

    Looking forward to your reply – maybe I’m doing something wrong??

    Cheers,
    - Tim.

  16. Tim said on 6 September, 2011 at 11:11 am

    Anyone…? I really want to use this grid system…

  17. Harry Roberts said on 6 September, 2011 at 11:14 am

    Hi Tim,
    I see what you mean, this is one shortcoming of this approach. I’ll see if there’s a way round it :)

    H

  18. tjay said on 18 September, 2011 at 12:49 pm

    If worked with the psuedo: .class:nth-child(3n) (”for a 3 column page”), it’s seems to work in most browsers.

  19. Kevin Vanhove said on 5 October, 2011 at 11:13 pm

    Why not use a margin on both sides of the column, then you don’t have to use any -20px or .end fixes. The 960.gs grid system works like that.

  20. Ethan said on 6 October, 2011 at 4:17 am

    If you’re building a grid that supports nesting, I think this is less efficient.

    For instance, let’s say we have a 10-unit grid with a row as follows:

    .row
  .col-8
     .col-4
     .col-4
  .col-2

    In this situation, the 8-unit column needs the same “increased width and negative margin” treatment as .row. In order to implement this treatment, it seems to me that we now have to distinguish columns that contain other columns, like so:

    .row
  .col-8.col-group
     .col-4
     .col-4
  .col-2

    And then our CSS can be .col-8.col-group {adjusted width and margin; }. So we’d need to a define ten more selectors to give a new width to each of our units. That’s messy, and we still need to add a class to every container except the most outer one.

    On the other hand, with the .last solution, we only have to add one rule and end up with only a couple extra classes max.

    Am I missing something?

Leave a Reply

Respond to Building better grid systems

Hi there, I am Harry Roberts. I am a 21 year old web developer from the UK. I Tweet and write about web standards, typography, best practices and everything in between. You should browse and search my archives and follow me on Twitter, 7,791 people do.

via Ad Packs