A grid, or typographic grid, is a series of horizontal and vertical lines used to align text and images. A way to bring peace and structure to your design. But where did it come from? And how do you make one in Photoshop, Illustrator and InDesign?

ORIGIN OF THE GRID

Grids, or grid-like structures have been in use for hundreds of years. One of the oldest examples I’ve found is the 4th century Greek bible, Codex Sinaiticus. Even here we can see that some method has been used to align all the text.

Interesting fact: The whole book has been photographed and made available for everyone to see! You can check it out here: www.codexsinaiticus.com.

In those times nobody spoke of grids or margins because those terms simply didn’t exist, but that doesn’t mean they weren’t used.

One of the first and most famous people to simplify the way pages were constructed is J. A. Van de Graaf. He studied the works of Gutenberg and others to find that they all used some method to position their text and calculate the margins.

He devised a system to create the perfect page construction. A canon (or law) of page construction, known as the Van de Graaf Canon.

There are a lot of other people besides Van de Graaf who devised different systems to do the same. Villard de Honnecourt and Raúl Rosarivo amongst others. But we won’t get into all of them right now.

Later in time this theory was universalized by Jan Tschichold. He came to almost all the same conclusions as his predecessors with the only difference that the page ratio is best at 2:3. His theory is that 2:3 fits within the Fibonacci Sequence (0, 1, 1, 2, 3, 5, 8, …) and the Golden Ratio (a+b is to a as a is to b). Very Da Vinci Code!

Today this is known as Tschichold’s Golden Canon of Page Construction.

MODERN GRID SYSTEMS

The grid system as we know it today was developed in the 1950’s by a group of designers including Josef Müller-Brockmann, Emil Ruder and Max Bill. They created a flexible system, based on the ideas of Jan Tschichold, to help create a clean and readable design.

This system was published later on by Josef Müller-Brockmann.

Those interested, and I can really recommend this book, can get a copy here.

Today, 556 years after Gutenberg (inventor of the printing press) printed his first book using the Secret Canon, the typographic grid is still alive and kicking!

So, how do you make your own grid in Photoshop, Illustrator or InDesign? The easiest way by far is in InDesign so let’s start there.

CREATE A GRID IN INDESIGN

We’re going to make a simple 6×6 A4 grid with a 5 mm gutter and a margin of 10 mm on all sides.

Go to File > New > Document… or even better, use the shortcut Cmd/Ctrl + N. Take a look at Creating A New InDesign Document, if you’re not really sure what all the settings are for.

Deselect the Facing Pages, select A4 as page size, we’ll leave the Columns at 1 and we want a Margin of 10 mm. This is what everything should look like.

Hit the OK button if you’ve got everything filled out.

Now go to Layout > Create Guides… A new window should appear.

As we said earlier, we want a 6×6 grid. So fill in 6 as Number in both the Rows and Columns. And we’ll use a Gutter of 5 mm, this is the space between each rectangle of our grid.

In the options we can choose to calculate our guides based on our Page size or our Margins. In most cases you’ll want to leave this set to Margins.

Click OK, and that’s it. A clean and simple 6×6 grid.

CREATE A GRID IN PHOTOSHOP

Photoshop doesn’t have a built in function to create a custom grid. Sure, you could do this manually, but that’s quite a time consuming piece of work and there are a lot of plugins out there that can do all the work for you.

My personal favorite is Cameron McEfee’s GuideGuide. And the best part is, it’s free! Thank you Cameron! So let’s go ahead and download the little gem here.

All you have to do is unzip the package and place it’s content in the Panels folder inside your Plugins folder. Restart Photohop and you’re all set! You can fins all the details on Cameron’s site.

Just like we did in InDesign, we’ll make a 6×6 A4 grid with a 5 mm gutter and a margin of 10 mm on all sides.

With the GuideGuide plugin installed, go to File > New… or use the shortcut Cmd/Ctrl + N.

Select the International Paper preset, and A4 as page size, CMYK as color mode and White as background. This is what everything should look like.

Hit the OK button if you’ve got everything filled out.

Go to Window > Extensions > GuideGuide, and our new & shiny grid tool appears.

Now all we have to do is fill it out, click the Create Guides button and we’re set!

The first 4 fields are for the Margins, we’ll fill in 10 mm in each field (top, bottom, left & right margins). The second 4 are for the Columns and Rows. We want 6 columns and 6 rows, both with a gutter of 5 mm. It should look something like this.

If you’re ready, hit the Create Guides button and GuideGuide will start adding the guidelines to your Photoshop document.

And this is the result, a perfectly positioned 6×6 grid with a 5 mm gutter.

CREATE A GRID IN ILLUSTRATOR

Now comes the trickiest of the three, because as far as I know (and correct me if I’m wrong) there are no built in functions or plugins for creating guides or grids in Illustrator.

Go to File > New… or use the shortcut Cmd/Ctrl + N. Select Print as document profile, A4 as page size, Millimeters as units and we’ll leave the Bleed at 0 for now. This is what everything should look like.

Just as in InDesign and Photoshop, we’re going to create a 6×6 grid with a gutter of 5 mm and a 10 mm margin.

Select the Rectangle Tool in the toolbox or use the shortcut M, and click once anywhere on our page. This will bring up the Rectangle window, here we can manually enter a size for our rectangle.

Fill in 190 mm for the Width and 277 mm for the Height and click the OK button. That’s the size of our page, minus the 10 mm margin we’re adding to all sides.

Now we created our rectangle, we only have to center it on our page.

Open the Align panel by going to Window > Align, or use the shortcut Shift + F7. If you look at the bottom right corner, there’s a button called Align To, make sure you have Align to Artboard selected.

With our rectangle still selected click on both the Horizontal Align Center and the Vertical Align Center buttons to center our rectangle on our page.

Now we’re going to split our rectangle into a grid. To do this go to Object > Path > Split Into Grid… A new window appears where we can choose our rows and columns.

Just like we did before, fill in 6 for both the number of Rows and Columns. And 5 mm for both Gutters. This is what everything should look like.

Click the OK button if you’ve got everything filled out.

Now this is our base to create our grid. All we have to do now is start dragging Guides on our artboard and they’ll snap right to our grid of rectangles.

Creating a guide is one of the easiest things to do. Just click anywhere inside your Rulers with the Selection Tool and drag a guide onto your artboard.

If you don’t see any Rulers on the left and top of your artboard, simply go to View > Rulers > Show Rulers, or use the shortcut Cmd/Ctrl + R.

If you drag a guide onto your artboard, and you move your cursor close enough to an edge of an element on your artboard, it will snap to it, then release, and you have a perfectly positioned guide.

NOTE: if you misplace a guide in Illustrator, you’ll notice you can’t move it anymore, this is because by default guides are locked in Illustrator. You can do one of two things; you can undo this by going to Edit > Undo or use the shortcut Cmd/Ctrl + Z; or you can unlock the guides by going to View > Guides > Lock Guides (Alt + Cmd/Ctrl + ;).

Do this for all 24 sides of our rectangles and you should get something that looks like this.

Now all we need to do is delete our base grid of rectangles, and we’re ready to go!

RESOURCES

The Grid System by Antonio Carusone, is the resource for all your gridding needs! Everything from articles to tools, books, blogs and templates!

Myths & Misconceptions About Grid Systems is an amazing article on Antonio’s other site, AisleOne.

The Secret Law of Page Harmony is a must-read article by Alex Charchar from Retinart. It covers and compares all the different canons and has some modern examples of grid use.