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.
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.
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.
🤑 FREE Web Design Workshop 👉 Enroll Now! 🤑
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
To learn more about how hierarchy impacts design, check out our post Understanding Hierarchy in Design.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
