What is Grid Notation?

Grid Notation is a language used to create grids. When you fill out the GuideGuide form, it creates a grid notation string behind the scenes.

Let’s take a look at a simple example — a three column grid. Here’s what it looks like in the Grid tab:

If you navigate to the Custom tab with notation sync turned on, you’ll see this:

Grid Notation is a string of commands that GuideGuide reads from left to right. Let’s break down the one above:

$column = | ~ |

This first line defines a variable. This variable has a wildcard command ~. GuideGuide divides the available space between all of the wildcards in a grid. On either side is a guide command | which tells GuideGuide to place a guide.

So what we have here is something like “Remember that if I use $column it means add two guides and figure out the space between them for me.

| $column*3 | (vpl)

Here we see two guide commands again, and between them there is a reference to our $column variable that is repeated three times *3. The bits in the parenthesis are options, the important one here being the v for vertical guides.

This essentially says “Divide the area into three equal spaces and place vertical guides between each space.”

GuideGuide can feel complicated, but it’s the very powerful secret to creating every kind of grid or alignment system you might need.