Columns and the Greatest Common Divisor

Avatar of Chris Coyier
Chris Coyier on

I was recently putting together some CSS for columns. There was a few pre-determined widths that the columns needed to accommodate. For whatever reason (maybe because every grid framework in the world is this way) my mind went right to trying to find a common building block size. All columns are either the size of one building block or a multiple of a building block with gutter widths added.

You know what I mean:

So I had this list of sizes to accommodate, and I needed to figure out what that base building block was going to be. I thought to myself: “isn’t that like, the lowest common denominator or whatever?” Well, no, but it’s similar. What I was looking for was the greatest common divisor. That is, the largest building block that can build those columns evenly.

The mathematical way to represent a greatest common divisor expression is: gcd(n1, n2, n3, etc)

First I tried OS X’s spotlight, as that can do math problems sometimes. Not this one. Using the Google search box didn’t work either. Fortunately, Wolfram|Alpha worked!

Here’s an example of a series of desired column widths and getting a useful common divisor.

Unfortunately, when I ran my particular set of numbers, the greatest common divisor was 5. Five pixels. That’s smaller than the gutters that were planned. I hate to think about writing the CSS for a 192-column grid framework.

Two Options

In this particular situation, I see there being two options:

1) Adjust those widths

Tell the people in charge of whoever gave you those goal widths what the problem is. There is no common building block that makes sense. Why are they that way? Can they be adjusted to fit a more reasonable common building block? There may be benefits to this, such as clean visual consistency.

2) Screw it

Here’s another question: why do we need base building blocks at all? I imagine it’s useful for mega-ultra-flexible layouts (e.g. like the New York Times needs to have). I’ve actually never worked on a site that was that complex and deep with content, so I have little first-hand experience.

In my case, the grids audit was already done. We already defined the needed grids. Rather than create a whole complex grid framework that can aligns to the needs of these few needed grids, you could write very specific CSS just to define those grids.

Which way?

So which is the right choice? Getting to a reasonable building block size means being able to create a grid framework that is very flexible and useful for grids that go beyond a couple of specced out needs. It also means a lot more CSS.

Defining just the grids you need saves a lot of CSS you may never use. But it’s also far less flexible.

I guess it’s one of those “it depends” situations.

I’ll make sure to blog about it as my particular situation plays out.