How to Use Grids in Design

Grids are used by graphic designers and website designers to organize website page layouts, improve app user experience (UX), and make the design process more efficient. Learn about the various types of grids used in design.

What Exactly Is a Grid?

A grid system is a series of overlapping and evenly spaced lines in graphic design that helps designers place images and typography on a page in a hierarchical order. Grid lines do not appear in the finished product, advertisement, or print piece. Instead, grids are used in the layout design process to align content correctly, improving readability and user experience.

Following the boxy qualities of the De Stijl and Bauhaus art movements, grids became more common in design in the early twentieth century. Josef Müller-Brockmann, a Swiss graphic designer, and Jan Tschichold, a German designer, were influential in developing grid styles for design.

How to Make Use of Grids in Design

Grid lines serve as the foundation for design, and their spacing allows for an infinite number of opportunities to create something unique, neat, and true to the aesthetic preferences of your final product. Take the following steps:

Choose a design style. Designers should begin by asking themselves what they want to create”for example, a magazine website like New York Times Magazine, or poster design”and then use a grid system that works best for that style.

Create your own grid layout. Designers can customize the number of columns and rows for each piece of content and space grid lines in inches, pixels, or another unit of measurement to streamline workflow.

Make use of a grid template. Designers can use templates or create their own grids when using page and layout design software. If you frequently work on the same print issue of a literary magazine, for example, create a template with the same grids in place so you have a document to reuse with the same layout rules intact.

Why Grid Systems Are Important

Using a grid in layout design helps to focus the viewer and improves user interface (UI) design.

1. Grids can help to achieve balance. One of the simplest ways to achieve balance in your image is to use a grid in layout design. Placing elements on the vertical and horizontal lines that divide your page into thirds provides balance to your layout design without making everything symmetrical, which can become tiresome.

2. Grids aid in image coherence. A grid can assist a designer in arranging the many disparate elements of an image in an easy to digest and cohesive manner.

3. Grids create a visually appealing image. A grid provides a layout template for creating an image that visually appeals to the viewer and guides them through the appropriate visual hierarchy of information.

Grids in Design: 6 Different Types

Each of the grids below has distinct properties that make it suitable for various interfaces and print or web designs:

1. Baseline grid: One example of a baseline grid is ruled paper. Text blocks are one of the most important design elements in a baseline grid, which features evenly spaced horizontal lines to allow you to perfectly space text leading up and down the numerous grid lines.

2. Column grid: These grids divide content into vertical chunks of equal column widths, similar to how a newspaper divides text into columns.

3. Hierarchical grid: Despite their irregular design, hierarchical grids serve multiple content needs. Designers may use multiple grids to focus attention on one piece of content, such as placing a text box or image over another.

4. Manuscript grid: Manuscript grids are used by designers for books that have one rectangular block of text on each page, plus white space around it to create clear gutters and borders. Manuscript grids may also include a narrow box for headings, such as the title of the chapter, book, or author.

5. Modular grid: Modular grids generate multiple equal-sized boxes for text and images. Individual modules for hosting content are formed by the intersection of vertical and horizontal grid lines. To establish the focal point of a portrait-style layout, use a grid of nine equally sized rectangles.

6. Pixel grid: In graphic design, pixel grid systems are more granular: Numerous horizontal and vertical lines intersect to form tiny squares, allowing graphic artists to move content on a finer scale.