How to Use a Grid in Web Design

by
Monica Galvan
A 3D pencil and ruler on a pink background
Grids are the skeleton of design, they help you create order and organize the content of your design. In this article, we’ll dive into what a grid is, why you should use them in web design, and how to create one.

What is a grid?

You open your design program of choice and there it is staring back at you, a blank canvas. It can be a little intimidating. Where do you start? Where do you put the headline? Where do you add images and illustrations? A grid is just what you need to get started.

A grid is a system for organizing the content of a design, they create alignment and order. Whether you’re creating a layout for print like a magazine or combining images and text to design a landing page, you will use a grid to help you make design decisions and create a good experience for the user. Take a look at how this landing page design breaks down its elements across a 12-column grid.

Landing page using a 12-column grid (source: Milo Studio)
Landing page using a 12-column grid (source: Milo Studio)

Using a grid eliminates random decision-making. Instead of placing elements in random places, by using a grid properly you’ll know exactly where to place elements like a logo, menu items, a headline, body copy, images, and more. It will also help speed up your design process. 

Where do grids come from?

Before we get into how grids impact web design today, let’s dive into a quick history of where grids came from and how they were used. Grids are essential for organizing typography. Grids were first used to organize type in manuscript layouts. Take a look at how well-organized this spread is from an early manuscript page.

Early manuscript design, c. 1100–1160 (source: Medieval Books)
Early manuscript design, c. 1100–1160 (source: Medieval Books)

For a deeper dive into the history of printing, check out our post on The history of graphic design.

Fast forward to the Industrial Revolution and the introduction of mass production, newspapers, posters, advertisements, and other printed materials were printed in abundance. 

Newspaper from The New York Times, July 29, 1914
Newspaper from The New York Times, July 29, 1914

In the 20th century, designers like Jan Tschichold and Josef Müller-Brockmann developed new grid systems that became what we know today as The Swiss-Style or The International Typographic Style. They introduced a modular approach with plenty of whitespace. 

Grid systems book (source)
Grid systems book (source)

Why grids matter in web design

Grids help give shape and hierarchy to web design. Without them, you would have no idea where to place your design elements. We need them to create a good user experience so a user knows how to navigate through a website and find what they need. 

5 column grid (source: Hrvoje Grubisic)
5 column grid (source: Hrvoje Grubisic)

Grids also help when it comes to responsive design. While the desktop experience of a landing page might use multiple columns to span text and images across, the design needs to be flexible enough to condense down well to 2–3 columns on a table and 1 column on a mobile device. Notice how the mobile grid becomes stacked like a 1 column modular grid in this example.

Example of how grids can be responsive
Example of how grids can be responsive

Types of grids

There are 5 main types of grids. Some are better than others for web design, but you have likely used all 5 at one point in your design career.

Baseline grid

Example of a baseline grid
Example of a baseline grid

A baseline grid is a bit more technical, it’s defined by where the text sits. Essentially, it’s the leading or spacing between the baselines. This grid helps to create a good experience for the reader, especially where there is a lot of text to read. While it’s most important for print design like book layouts, it’s also critical to consider the baseline grid in web design. Think about how the spacing between your lines impacts the legibility of a landing page. If the text is too tight, a user may give up and leave your site completely. Create a good balance of text and white space.

Manuscript grid

Example of a manuscript grid
Example of a manuscript grid

A manuscript grid is the foundation for all books, newspapers, and magazines. Also known as a single-column grid, it’s one of the simplest grid structures and is good for large continuous blocks of text and images. Basically, it’s a large rectangle area inside the page, like a bounding box for the text. 

Column grid

Example of a column grid
Example of a column grid

Column grids help break up text, photos, and illustrations. For websites, you can have anywhere from 2–12 or even 16 columns that span the width of a landing page. You can place text and images within just one column or they can span across multiple columns. The space between columns is called the gutters, they should be the same size across all. 

Gutters are the space between columns
Gutters are the space between columns

Not all column grids have to be symmetrical. For example, you can utilize an asymmetric column grid where some are thinner while others are wider which can be useful depending on the hierarchy of your design. Asymmetrical column grids are commonly used on blog websites where you have the main content in the larger two-thirds container of the layout, while the smaller third may be a sidebar that includes information about the blog and the writer. Take a look at how this blog homepage uses an asymmetrical column grid.

Example of an asymmetrical column grid (source: A Beautiful Mess)
Example of an asymmetrical column grid (source: A Beautiful Mess)

Modular grid

Example of a modular grid
Example of a modular grid

Modular grids are similar to column grids but differ with the addition of rows. You’ll find newspapers and magazines use modular grids quite a bit to organize content but they can also be used on a website or app design, such as in a product grid section. 

Take a look at how Everlane uses a modular grid to organize its selection of denim.

Example of a modular grid in web design (source: Everlane)
Example of a modular grid in web design (source: Everlane)

The YouTube homepage is another example of a modular grid in use. While they utilize a sidebar on the left for common links like the trending and subscriptions section, all video content is organized into a 4 column modular grid to maximize how many videos a user can browse while scrolling for something to watch.

The YouTube homepage is an example of a modular grid
The YouTube homepage is an example of a modular grid

 

Hierarchical grid

Example of a hierarchical grid
Example of a hierarchical grid

Hierarchical grids are most commonly found in web design. The purpose of these grids is to arrange elements in order of importance. They can be a little more flexible but they still use columns, rows, and modules to help with organization. They are created organically by placing the most important objects on the page first and then creating a grid around them.

News and media-related sites tend to use this type of grid to help draw attention to some articles and post more than others. Take a look at this example of how The New York Times uses a hierarchical grid on their homepage.

Example of a hierarchical grid in web design (source: The New York Times)
Example of a hierarchical grid in web design (source: The New York Times)

To learn more about how hierarchy impacts design, check out our post Understanding Hierarchy in Design.

How to create a grid in Adobe XD

It’s easy to create a simple column for landing pages in Adobe XD. Just highlight your artboard and underneath the Grid section check the box for grid, choose Layout.

How to create a column grid in Adobe XD
How to create a column grid in Adobe XD

From there you can customize your grid however you like. You can adjust how many columns, the gutter width, the column width, and even choose if you want this to be your default grid for future web design projects.

Tips for using grids

Now that you know what a grid is, different types of grids, and create your own, let’s get into some tips for how best to use them in web design.

Think about the grid before you design

After you have done your research, maybe even explored some low-fidelity wireframing on paper, create a grid for your landing page. It’s one simple step, once you’ve created it, you won’t have to think about it again for all subsequent landing pages. Before you start designing, think about the grid first, rather than leaving it to the end and trying to make your design fit into a grid. 

Don’t be afraid to break the grid when needed

New designers might feel confined by the idea of using a grid but you shouldn’t. After you’ve created your grid, it’s ok to break it! But at least you’re doing it intentionally and there are reasons for your design decisions. The more you use a grid, the more you’ll realize how it’s a guide and it will actually help you design better faster.

Don’t be afraid of whitespace

Balancing whitespace or negative space is important in web design. Don’t feel the need to fill every corner on a landing page design. Consider large margins and healthy spacing between sections of content to allow your user to breathe and pause as they are scrolling through your website. 

Try using the 960 grid system

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions based on a width of 960 pixels. There are two variations: 12 and 16 columns.

The 960 grid follows the following structure:

  • The total width is 960px
  • Use 12 columns maximum, 60px each wide
  • Use 10px spacing to the left and right of each column for a total gutter spacing of 20px
  • Total content area is 940px

The 12-column grid system allows for plenty of flexibility. Here’s an example of how you can use the 12 column grid to add content in a 3 column layout.

Example of elements placed on a 12 column grid
Example of elements placed on a 12 column grid

Analyze the grids of other websites

As you’re browsing the internet, whether it’s paying a utility bill or scrolling social media, pay attention to the underlying grid. What kind of grid is the designer using? Hare they using it to design the experience? You’ll notice how successful (or unsuccessful) a grid is the more you pay attention to how content is organized on various websites. Observe, learn, and use it to create better website designs.

To learn more about how a grid impacts the layout of web design, check out this video where Ran walks you through how to create better layouts.

Want to learn more about web design?

First, check out our YouTube channel Flux where we share tons of free information on how to become a web designer. 

Consider checking out one of our programs for a deep dive into a specific topic. We offer 3 different programs that go deep into design, development, and how to build a successful freelance business. We give you the path to follow so you learn only the skills you need at your pace.

In The $10k Website Process, you’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.

In The Webflow Masterclass, you’ll learn how to use Webflow to build custom, fully-functional websites quickly without learning how to code. Break free from restrictive templates, regain your creative freedom, and bring your best creations to life with this powerful visual development tool.

In The 6 Figure Freelance Designer, you’ll learn how building a successful business as a freelancer is possible anywhere with an internet connection. We give you a roadmap to follow to consistently attract high-value clients and make a great living doing what you love.

FREE WEBDESIGN COURSE IN YOUR INBOX

Start growing your business today with Ran’s High-Value Web Designer Secrets email course that teaches you the three most significant things he’s learned as a freelancer.