Columns and the Greatest Common Divisor

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(n₁, n₂, n₃, 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!

column-calc-1 — 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.

Comments

Jon

# November 3, 2011

Kudos on correctly identifying the greatest common denominator/divisor. (“Lowest common denominator” means nothing, despite its popularity.) GCD alone is not quite what you want, though. At best it will give you a starting point for GCD( gutter, column-size). For n columns you have n-1 gutters.

This leads to a 3rd option for solving the problem: pad either sides of the design to decrease the target widths so that you have better GCDs. e.g. You could pad 960 with an extra 3px on either side. This gives you 18 columns of 45px w/ 18px gutters.

Aaron Stone

Permalink to comment# November 3, 2011

The lowest common denominator is nothing but 1. You were probably talking about the highest common denominator.
Kevin

Permalink to comment# November 3, 2011

lowest common multiple

Alex

# November 3, 2011

I often find these problems very difficult to overcome and I usually find the best method by trial and error.

Bryan Gruhlke

# November 3, 2011

As a CSS designer I really like the idea of the ultra-flexible framework, but when you are working on a budget and timeline sometimes you really just need to define those few columns specifically. Your solution makes a lot of sense to me – why spend tons of time and effort to build the flexible grid-based framework into a website that won’t ever use it?

Oh, and any CSS post that involves math a bit more complicated than simple addition gets a thumbs up from me.

Chandu

# November 3, 2011


// gcd utility function
// usage:
//   gcd([240, 600, 360, 1200]);
//   or with strings
//   gcd([240, '600', 360, 1200]);   
function gcd(arr) {
  if(!Array.isArray(arr)) {return undefined;}
  return arr.reduce(function (a, b, i, arr) {
    if (+a < 0) {a = -(+a);}
    if (+b  +a) {var temp = +a; a = +b; b = temp;}
    while (true) {
      a %= b;
      if (a === 0) {return b;}
      b %= a;
      if (b === 0) {return a;}
    }
  }, arr[0]);
}

Chandu

# November 3, 2011

Sorry I missed to replace ‘<‘ symbol!


// gcd utility function
// usage:
//   gcd([240, 600, 360, 1200]);
//   or with strings
//   gcd([240, '600', 360, 1200]);   
function gcd(arr) {
  if(!Array.isArray(arr)) {return undefined;}
  return arr.reduce(function (a, b, i, arr) {
    if (+a < 0) {a = -(+a);}
    if (+b < 0) {b = -(+b);}
    if (+b > +a) {var temp = +a; a = +b; b = temp;}
    while (true) {
      a %= b;
      if (a === 0) {return b;}
      b %= a;
      if (b === 0) {return a;}
    }
  }, arr[0]);
}

Thanks.

vince

# November 3, 2011

Ran into a very similar (if not exactly the same) situation last week. I was in the middle of trying to adjust an existing grid system when the thought occured to me “…You only need two columns. What are you doing?” When it was all said and done, finished the project way ahead of schedule and I was a bit prouder of it than i expected. Causation, correlation? Meh.

Hassan

# November 3, 2011

You could simply use JavaScript to generate your 192 column grid and just append the result to the head of the document.

Aaron Stone

Permalink to comment# November 3, 2011

That’s a good idea. But only at the expense of user accessibility. Browsers without JavaScript (very rare, exotic browsers) won’t get the grid. I think just defining the grid according to the specific widths given is the best idea. Making a 192-grid framework with 1 column = 5px is very absurd.

Maybe it’s possible to use a larger number as the column width, and then use some relative positioning or margins (this is the wrongest use of relative positioning/margins ever!) to adjust it appropriately.

Moreover, if the project concerned does not involve extensions to the grid or any major changes in the grid, then specific widths is the way.

I wonder how making a grid framework would be possible if all the widths to be accommodated in the columns have their GCD equal to 1 (eg: all prime numbers) (this is a concept closely related to co-primes).

Another great solution to the above problem would be to round off the specific widths of the rows and then find their GCD and use that as the smallest column width. Then adjust any discrepancies with (again, a bad practice) relative positioning or margins.

Marco Campos

# November 3, 2011

a question: why do you even need a grid to work on? why not just work on flexible layouts that adapt to user’s screen size?
if you think about it, css just provides the tool needed with min/max-width/height and percent/em based sizes. the only and eternal problem is internet explorer.

Akuseru

# November 3, 2011

The first time I’ve see a grid system I was like “Oh! God! This was built by an angel… or God Itself, God, I didn’t know that you code in CSS…” And Yes, I use it in various projects, generally 960.gs…

But after a while, when you fully understand the positioning and the displays -in css- the best option it’s make your own blocks, it’s easier, light and proves -to yourself- what can be made by self. All grid systems Rocks, they are a bit harder when you use media queries but beside this I believe that:

1. If you need to create a layout that is not flexible, then use a grid system like 960.gs (I’m not saying that 960.gs isn’t flexible, I Luv 960.gs)
2. If you need to create a layout that is flexible, but you see the difficulties of positioning and media queries everywhere, then use something like Skeleton
3. If you need an feel safe with own-make layout, then rock yourself =D.

Thanks Chris

Jesse

# November 3, 2011

Excellent point! Knowing requirements first, greatly simplifies and speeds up the process. I ran into the same situation on a recent project.

If you feel comfortable busting out a calculator you can use flexible media techniques and have a fully flexible site though.

IT Mitică

# November 4, 2011

I’ll say this regarding the 5px gcn: there is something in there making you to draw a wrong conclusion.

You may need an extra pair of eyes.

james

# November 4, 2011

Hey i made this a little while ago for a project I’m working on

http://www.mediafire.com/?33twzq6ktv2as5y

Jonathan

# November 4, 2011

I like and use grid systems, but for most site do end up just building the columns I need. The ultimate, flexible gird is not useful to clients who want to manage their own site in a CMS WYSIWYG. Very few clients can handle that many choices.

A grid system that uses too small a base block width isn’t really a real-world math and CSS problem. It’s a real-world design problem. If the grid is that small, it defeats its own design purpose of providing visual order and consistency.
Of course it still provides flexibility, but so does position: absolute and position: relative. GoLive, if anyone remembers that program, tried to do something similar to a very small increment grid. Not too popular.

Bram

Permalink to comment# November 4, 2011

This article on modular layouts sets a very helpfull example. Make the smallest gridunit as wide as the smallest image.

James

# November 5, 2011

There are number applications web and desktop which help calculate gris sizes. I’ve been trying https://www.designersbookshop.com/grid-calculator-basic-edition.html Other applications on the site include plugins for InDesign, which I use for wire framing, and allow for an incredible amount of flexibility.

Web design automaton

# November 6, 2011

Part of me always wants to go with the second option listed when faced with these types of problems. Yet saner minds always prevail.

John Sweden

# November 7, 2011

Phew…this stuff makes my head spin, even more than the slag-heap of “web apps” that seems to be swallowing simplicity in all directions.

Julio Moreira

# November 10, 2011

I’m now working as a freelancer and probably i’ll write all the code by my self, i’m trying somethig more experimental with the Fibonacci numbers. I make a grid with the sequence till 987px from left to right, so i make the same with the sequence again, this time from right to left. The result is pretty strange as a grid system but i went further away with it and liked a lot the final feeling, hope soon i can shared the result with you guys. Cheers…

Free

# November 11, 2011

@Chandu thx mate u hleped me a lot!

Chanel

# November 15, 2011

Many thanks. I’v learned a lot of good skills. Thanks for those all.

steph

# November 15, 2011

Thank you. I could really use this for the project I’m currently working on.

Darren @ 123 Web

# December 6, 2011

Thanks Chris –

Wolfram Alpha looks to be a handy little resource for GCD.

I’ve never worked on anything as complex as the NYT – but having said that, Wolfram might be handy even for less-complex sites.

And definitely for setting a framework.

Many Thanks,
Darren.

This comment thread is closed. If you have important information to share, please contact us.