# How To Use Grid Systems

by Daniel Skrok | | 25 min read
639 shares

Grids systems can help you add structure to your design, organize information and create a consistent user experience. When designing with grids, the best thing you can do is to choose the right grid for the right project. However, with so many grids to choose from, it can be hard to know where to start. So, let’s discuss the common types of grid systems and how to effectively use them in your work.

In this lesson, you’ll learn how to use grid systems. You’ll also learn how to make a book from Italian designer Massimo Vignelli. We’ll explore seven common types of grid systems including rule of thirds, golden section, single-column, multi-column, modular, baseline and responsive.

It’s important to understand the common types of grid systems so you can integrate them into your work and help design the best possible user experience. Before we start, let’s first watch Italian designer Massimo Vignelli make a book.

### Massimo Vignelli Makes Books

Massimo Vignelli’s approach to book design is the subject of a video created by Pentagram, a design firm, for the “What Will You Make Today?” campaign from paper company Mohawk. In the video, Vignelli discusses his use of the grid as the basis for the layout of a book’s pages, using one of his classic book designs for the architect Richard Meier as an example.

“The grid is an integral part of book design, it’s not something that you see. It’s just like underwear: you wear it, but it’s not to be exposed. The grid is the underwear of the book.”
— Massimo Vignelli

The interior pages of the book feature the grid of 24 rectangular blocks that Vignelli used as the basis of his layout for the Meier monograph, as you’ll see in the video. Let’s watch.

### Rule of Thirds Grid

The rule of thirds is a grid system that divides a composition evenly into thirds, both horizontally and vertically. The design elements are placed at the intersection of those dividing lines, or along one of the lines itself.

Here, we see how the rule of thirds is used as an effective way to elicit emotion and define the relationship between the two characters in Disney Pixar’s Wall-E.

### Golden Section Grid

The golden section (also known as the golden ratio) is a mathematical ratio that has been used in art and architecture for more than two thousand years. The formula for the golden section is a : b = b : (a+b). This means that the smaller of two elements (such as the shorter sides of a rectangle) relates to the larger element (i.e., the longer sides) in the same way that the larger element relates to the two parts combined. In other words, side a is to side b as side b is to the sum of both sides. Expressed numerically, the ratio for the golden section is 1 : 1.618.

The golden section is commonly found in nature, and when used in a design, it fosters organic and natural-looking compositions that are aesthetically pleasing to the eye.

The use of the golden rule is evident in the Brno Chair designed by Ludwig Mies van der Rohe. The chair was named after the town of Brno (in the Czech Republic) where the Tugendhat family, who commissioned the chair, lived. The Tugendhat house had a large dining room and table that could seat 24. The family needed a set of compact chairs that could fit neatly under the dining table. The Brno chair was designed for this purpose with a low sweep of the arms and compact form to fit neatly under the table.

The front view of the chair and side view fit neatly into the golden section rectangle. The angle of the front legs and chair back are symmetrical, and the radii of the curves are in 1:3 proportion.

### Single-Column Grid

The simplest grid consists of a single column of text surrounded by margins. Essentially, every time you open a new document in a page layout program, you are prompted to create a single column grid.

Here, we see the use of a single-column grid in a traditional book design by Ellen Lupton. Often, books and magazines are designed in spreads (facing pages) with a single column of text.

### Multi-Column Grid

While single-column grids work well for simple documents, multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to articulate the hierarchy of the publication by creating zones for different kinds of content. A text or image can occupy a single column, or it can span several. Not all of the space has to be filled.

Here, we see the use of a multi-column grid designed by Daniel Skrok for COMMON, a creative accelerator and community for social businesses. Often, books and magazines are designed in spreads (facing pages) with a single column of text.

### Modular Grid

A modular grid has consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right. These modules govern the placement and cropping of pictures as well as text. In the 1950s and 1960s, Swiss graphic designers including Gerstner, Ruder and Müller-Brockmann devised modular grid systems like the one shown here.

Below, we see an example of a modular grid in The Vignelli Canon by Massimo Vignelli. Massimo creates a grid by dividing the page into a certain number of columns according to the content (two, three, four, five, six, etc.). Then he divides the page from top to bottom into a certain number of rows (four, six, eight, or more) according to the size and need. The combination of vertical columns and horizontal rows assures a level continuity throughout the publication.

Once you have structured the page, you can begin to structure the information and place it in the grid in such a way that the clarity of the message will be enhanced by the placement of the text on the grid. There are infinite ways of doing this, and that is why the grid is a useful tool, rather than a constricting device. However, one should learn to use it so as to retrieve the most advantageous results.

### Baseline Grid

A baseline grid consists of horizontal guidelines that govern the whole document. Baseline grids serve to anchor all (or nearly all) layout elements to a common rhythm

Practical Tip: To create a baseline grid, simply choose the type size and leading of your text, such as 10-pt Scala Pro with 12 pts leading (10/12). Avoid auto leading so that you can work with whole numbers that multiply and divide cleanly. Use this line space increment to set the baseline grid in your document preferences.

Below, we see the use of a baseline grid in a downloadable template design by the IxDF. The horizontal baseline creates a common rhythm and a consistent alignment between multiple columns of text.

### Responsive Grid

A responsive grid adapts to screen size and orientation, ensuring consistency across layouts. These grids are typically made up of three elements — columns, gutters and margins.

Columns are the areas that content occupies. The gaps in between columns are gutters, which add breathing spaces between the content to avoid visual overload. Finally, margins are spaces that add padding between the page’s contents and the edges of the viewport. The configuration of columns, gutters and margins change depending on the screen’s width.

A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. Each breakpoint range determines the number of columns, and recommended margins and gutters, for each screen size.

For example, the IxDF Design System provides a structure for consistent page layouts, as well as for optimizing how content is displayed on different screen sizes. The responsive grid system is fluid on mobile and tablet sizes and fixed on desktop.

Get your free template for “How to Use Grid Systems”
Secure form

## The Take Away

Grid systems can help you add structure to your design, organize information and create a consistent user experience. When designing with grids, the best thing you can do is to choose the right grid for the right project.

In this lesson, you learned how to use grid systems. You also learned how to make a book from Italian designer Massimo Vignelli. We explored seven common types of grid systems including rule of thirds, golden section, single-column, multi-column, modular, baseline and responsive.

Let’s recap the seven common grid systems:

• The rule of thirds is a grid system that divides a composition evenly into thirds, both horizontally and vertically.

• The golden section has been used in art and architecture for more than two thousand years. Expressed numerically, the ratio for the golden section is 1 : 1.618.

• Single-column grids are the simplest, consisting of a single column of text surrounded by margins.

• Multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations.

• Modular grids have consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right.

• Baseline grids consist of horizontal guidelines that govern the whole document. Baseline grids serve to anchor all (or nearly all) layout elements to a common rhythm.

• Responsive grids adapt to screen size and orientation, ensuring consistency across layouts. They are typically made up of three elements — columns, gutters and margins.

Now that you understand the importance of the grid systems and how to integrate them into your work, take what you learned and add a little structure to your designs.

Kimberly Elam. Grid Systems: Principles of Organizing Type. 2004. (Link)

Kimberly Elam. Geometry of Design: Studies in Proportion and Composition. 2011. (Link)

Ellen Lupton. Thinking with Type. 2010. (Link)

https://www.pentagram.com/work/massimo-vignelli-makes-books

## Image

© Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

639 shares

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share on:

## Cite according to academic standards

Skrok, D. (2021, November 4). How To Use Grid Systems. Interaction Design Foundation - IxDF.

## New to UX Design? We’re giving you a free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.