Category Archives: Mathematics

The Divine Grid

In my previous article, I covered the most common methods for using the golden ratio in web design. I also alluded to a discovery I made when I was trying to make a grid composed of golden rectangles. In this article, I’ll illustrate how to create such a grid, then I’ll give you one to play with.

Step 1: Define some constants

Let’s make the width of our page 980 pixels. We’ll use 6 columns and make the width of the gutters between our columns 10 pixels each. That means that the width of our columns is 155 pixels each, because of math:

(980 pixels - (5 gutters * 10 pixels)) / 6 columns = 155 pixels

Basically, the width of our columns is the width of our page divided by the number of columns after subtracting the total width of our gutters.

Step 2: Find the dimensions of a single grid cell using the golden ratio

Most webpage grids are composed of columns only, but ours will have rows as well. We want our grid to be composed of golden rectangles. So, to find the height of a single grid cell, we simply divide its width – the width of one of our columns – by the golden ratio:

155 pixels / 1.618 ~ 95.797 pixels

Since browsers can’t render sub-pixels, we’ll round the height of our rows to 96 pixels each. So the dimensions of a single grid cell in our grid is 155 pixels wide by 96 pixels high.

Step 3: Create bigger golden rectangles from smaller golden rectangles

Our columns are 155 pixels wide each, and the gutters between our columns are 10 pixels wide each. So, if we want an element on our page to span two columns, it would need to be 320 pixels wide:

155 pixels + 10 pixels + 155 pixels = 320 pixels

Now, if we want this element span two rows and to be a golden rectangle, we just divide its width by the golden ratio:

320 pixels / 1.618 ~ 197.771 pixels

So the dimensions of an element on our page that spans two columns and two rows is 320 pixels wide by 198 pixels high. That means that the height of the gutters between our rows is 6 pixels each, because that’s the space that’s left over after subtracting the total height of two rows from the height of a golden rectangle that spans two columns:

198 pixels - (2 * 96 pixels) = 6 pixels

We can follow this procedure to build our whole grid, which results in the following:

A grid composed of golden rectangles, 155 pixels wide by 96 pixels wide each

You can see from the image above that an element that spans three columns and three rows is 485 pixels wide by 300 pixels high, and element that spans four columns and four rows is 650 pixels wide and 402 pixels high, etc. Each of these bigger golden rectangles is made out of smaller golden rectangles.

Step 4: Make something cool

Now, download the Divine Grid from GitHub, which uses a page width of 988 pixels, 6 columns, a gutter width of 20 pixels, and a gutter height of 13 pixels. This results in a slightly different grid than the one above, but it works just as well:

A grid composed of golden rectangles, 148 pixels wide by 91 pixels wide each

Check out the included files for examples of the Divine Grid in action. demo.html contains at least seven golden rectangles. They are outlined in red in this screenshot, and an image of the grid is superimposed:

The Divine Grid - a fluid, responsive CSS grid framework based on the divine proportion, also known as the golden ratio

Finally, have a gander at the Divine Template – a fluid, responsive CSS template based on the Divine Grid:

The Divine Template - a fluid, responsive CSS template based on the Divine Grid

After you get a chance to play with it, I’d love to see what you came up with! You can post a link in the comments section below.

Also, there’s no reason why you can’t do something similar with seven, eight, or sixteen columns. I just like six.

Advertisements

How to use the golden ratio in web design

I’ve written about the golden ratio before, and how I became confused when I was researching the Golden Grid System and The Golden Grid – two CSS grid frameworks whose names suggest there is some relation to the mathematical phenomenon. To be clear, using these frameworks won’t get you any closer to applying the golden ratio in web design, but they are both incredibly useful nonetheless.

There are several articles available that will give you some ideas of how to use the golden ratio in page layouts. Most of them suggest a strategy like this: Multiply the width of your main content area by the golden ratio – approximately 1.618 – and use the product as the width of your sidebar area. Too often, this suggestion is followed by instructions on how to use the rule of thirds, which has little (if any) application in web design and nothing to do with the golden ratio at all. The rule of thirds is a neat trick in print design and photography, but is pretty useless when it comes to page layouts with dynamic content.

I tried experimenting with this sidebar idea a couple of ways. Here is what I came up with:

Using the golden ratio to find the width of consecutive sidebar areas

In this first example, the two right-most columns are in golden proportion with each other, since 52 x 1.618 ~ 84. Then, these two columns combined are in golden proportion with the third right-most column, since (84 + 52) x 1.618 ~ 220. Finally, these three columns combined are in golden proportion with the left-most column, since (220 + 84 + 52) x 1.618 ~ 576. I also tried this:

Using the golden ratio to find the widths of consecutive sidebar areas (cont.)

In this example, each column is in golden proportion with the ones on either side of it. However, it’s much too wide, although you might be able to use only the middle columns. Both examples are very impractical. I’m sure I could think of a use for that far-right column, but not in most cases.

Another strategy I’ve come across goes like this: Divide the width of any content area by the golden ratio and use the quotient as the height of your content area. This is practical if you can restrict the height of your content area. You can see it in action in Adit Gupta’s article on Smashing Magazine. I’ll put the image up here but give him the proper credit:

Using the golden ratio to find the heights of media objects

Each of the content areas above (The Beginning, Newton’s Vision, Einstein’s Relativity, etc.) is a golden rectangle, which means that its width is in golden proportion to its height.

Looking at the picture of Space Geek, I realized it should not be that much of a stretch to make a grid composed of golden rectangles. The awesome discovery I made later restored some of the vigor I had once lost for mathematics. Next time, I’ll explain all about the discovery I made and unveil something truly freaking awesome.

The golden ratio and the rule of thirds are not the same thing

I won’t waste words telling you what the golden ratio or the rule of thirds is. That’s what Wikipedia is for.

Instead, I want to discuss a specific issue regarding these two distinct concepts, which is that many people think they are not two distinct concepts but they are actually the same thing. I will let Google prove my point.

Here’s just a sample from the first page of search results:

To be fair, most people probably don’t care that there is a distinction, but some people really, really do.

I care because it confused me to no end when I was researching grid-based layouts. In particular, I thought the Golden Grid System and The Golden Grid had something to do with either the golden ratio or the rule of thirds, which they don’t. That’s not to say that they aren’t both incredibly useful, just that they have confusing names.

In addition, many people will admit that they are not the same thing, but that the rule of thirds approximates the golden ratio. However, the rule of thirds originally referred to using proportions of colors and not to dimensions or positions of elements in art. At best, the rule of thirds provides a lazy approximation of the golden ratio. Even that statement is a stretch though:

A comparison of the golden ratio vs the rule of thirds. The yellow lines were derived using the golden ratio, which is approximately 1:1.618. The black lines were derived using the rule of thirds, a ratio of 1:2.

I’ve even read somewhere that a golden spiral will eventually approach the point of intersection or “power point” of the rule of thirds, which is obviously false:

The golden spiral does not approach the point of intersection of the rule of thirds.

I know I’m not the first person to write about this, or the last, but hopefully I’ve helped to clear up some confusion.