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.
DaveDen 