Add a Golden Ratio Grid

The Golden Ratio is a mathematical equation often found in nature, science, art, and design that is considered an “ideal” proportion. GuideGuide can help you create grids using the Golden Ratio expressed as the percentages 38.2% and 61.8%.

A simple example

There are many ways to use these values. For a simple example, we’ll use a margin of 38.2%.

  1. Navigate to the Grid tab.

  2. Select your document, page, artboard, or an object. This will work anywhere.

  3. In the Margins section, enter 38.2% in the Left field.

  4. Click the Add guides button.

This grid has created a left margin that is 38.2%, which means the remaining area 61.8%. If you repeat the steps above, but enter the same value in every field, you will get a square that may be useful.

A more complicated example

For a more complicated example, we can use grid notation on the Custom tab to create a golden rectangle that fits the top of our selection

  1. Navigate to the Custom tab.

  2. Select your document, page, artboard, or an object. This will work anywhere.

  3. Enter this in the Grid Notation field:

    # Vertical guides
| 61.8% | 38.2% | (v)

# Horizontal guides
| 61.8% | (h $WIDTH)

  4. Click the Add Guides button.

How it works

Let’s break down what is happening in that grid notation.

# Vertical guides
| 61.8% | 38.2% | (v)

The | command to tell GuideGuide to add guides. Between the percent commands tell GuideGuide to add that percent of the total area as space between the guides. We then specify the v vertical guide option in parenthesis which means that the guides will be vertical and GuideGuide will use the width of the selected area as the basis of those percentages.

# Horizontal guides
| 61.8% | (h $WIDTH)

On the second line we do the same thing, but this time we include $WIDTH which is a special variable that refers to the width of the selected area. We specified the h option which makes horizontal guides. By default this will use the height of the selected area as a reference, so we also provide $WIDTH as the basis of the calculation instead.

The rest is up to you

There are many other ways you might use the golden ratio in your grids. You could create rows that are relative to columns, margins that are relative to gutters, and who knows what else. If you can think of it, GuideGuide can probably do it for you.