Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.

Free Course: Elements of a Great They Ask, You Answer Website

Start the Course Subscribe
Join 40,000+ sales and marketing pros who receive our 4x a week insights, tips, and best practices.
Thank you! You have been subscribed.
Learning Center
Learning Center
Close
The IMPACT Learning Center

Free resources to help you master inbound marketing and They Ask, You Answer

Access the Learning Center

Access the Learning Center

Access the Learning Center
learning_center_grey__What is They Ask, You Answer-v2-black

What is They Ask, You Answer?

What is <span>They Ask, You Answer?</span>
Articles, Podcasts, & Updates

Articles, Podcasts, & Updates

Articles, Podcasts, <span>& Updates</span>
learning_center_grey__Free Courses and Certifications.svg

Free Courses & Certifications

Free Courses & <span>Certifications</span>
On-Demand Keynotes & Sessions

On-Demand Keynotes & Sessions

On-Demand <span>Keynotes & Sessions</span>
Events
Events
Close
IMPACT+ Membership
IMPACT+ Membership
Close
Services
Services
Close
Navigation_8_2021_taya

They Ask, You Answer Coaching & Training

They Ask, You Answer Coaching & Training
They Ask, You Answer Workshop

They Ask, You Answer Workshop

They Ask, You Answer Workshop
Navigation_8_2021_workshop

Inbound Marketing Services

Inbound Marketing Services
Navigation_8_2021_website design - monitor

Website Design & Development

Website Design & Development
Navigation_8_2021_hubspot implementation

HubSpot Training & Implementation

HubSpot Training & Implementation
Navigation_8_2021_virtual selling

Virtual Sales
Training

Virtual Sales <br>Training
Navigation_8_2021_swell - paid ads

Paid Search & Social Services

Paid Search & Social Services
Become a Certified Coach
Become a Certified Coach
Close
... Inbound Marketing Web Design
Close
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website
Start the Course
Elements of a Great They Ask, You Answer Website
Free Website Course
View Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

What is the website grid?

By Tim Ostheimer

Tim Ostheimer also recommends this free course, Elements of a Great They Ask, You Answer Website.

What is the website grid? Blog Feature

A grid is a visual structure used for organizing the visual elements and typography of a design. Traditionally, a grid structure is used to evenly divide the design space into a series of vertical columns. This helps ensure the design has consistent spacing, proper alignment, and appropriate visual hierarchy, which are all important when considering the legibility of a design.

Free Course: Elements of a Great They Ask, You Answer Website

The grid, explained

The purpose and structure of the grid is different in print design and other mediums than in web design, so we’ll focus on its implementation for web design and development in this article.

In web design, the vertical grid is more important and easily identifiable than the horizontal grid. This is due to the nature of web design and the concept that page height is greatly dependent on the length of the content. So, although horizontal alignment is involved in many aspects of web design, the vertical grid lines (i.e. columns) are what create the foundation for a grid structure.

A familiar comparison to the grid would be something like the columns in a newspaper or magazine.

Most websites are built responsively (meaning the design will adapt or scale based on the device and screen size) and, as a result, the grid's outer columns may span from the left edge of the screen all the way to the right or the grid may be confined to the center of the screen with a specific maximum width.

grid-example

Most website grid structures use a 12-column grid, although there is no specific requirement for the number of columns. A website grid also has consistent spacing between each column, known as gutters, and spacing outside of the grid, known as margins.

Alignment and content type

A webpage built on a grid structure means most of the content or imagery that you see on that page is going to be anchored, in some way, to the left and right edges of one or more columns.

For example, a block of text content that covers the left half of the section of a page is an element which spans from the left edge of the first column to the right edge of the sixth column. This means the right half of the grid (columns 7 through 12) could be used for a related video or image.

However, the use of a bounding box (an invisible wrapper which contains the element) allows the text or imagery to be horizontally aligned (left, right, or center) within the available space. This means an element's bounding box may span a specific number of columns but the content within it may not necessarily cover the entire width of that space.

It's important to understand that text behaves differently within its bounding box than imagery and other media. This is because text will dynamically adapt to the available width so the number of lines is partially based on the user's screen size, whereas imagery will usually scale at a consistent aspect ratio.

Visual hierarchy

When considering the usage of a grid structure, it’s important to understand some of the basic design principles used in typography. These relate back to human psychology, and some of the more prominent ones are outlined in the Gestalt Principles, which is a set of laws describing how humans observe objects and patterns:

  • Law of Proximity – an assortment of objects which are close together are perceived as forming a group
  • Law of Similarity – an assortment of similar objects (in terms of shape, color, etc.) are perceived as forming a group
  • Law of Closure – an unclosed or unfinished shape will be perceived as being whole if the mind is able to fill in the missing information
  • Law of Symmetry – objects which are perceived as being equally arranged on or around a center point help the mind identify them as coherent objects
  • Law of Continuity – the mind can distinguish between groups of objects even if some visual information is unknown, such as if they overlap
  • Law of Figure/Ground – the mind will distinguish objects that appear to be in the foreground from the background
  • Law of Common Fate – the mind will perceive objects that move in the same direction as a group, even if they are visually different
  • Law of Past Experience – the mind is affected by past visual stimuli

gestalt-principles-examples

Understanding fundamental concepts of typography is necessary for proper usage of the grid. However, it mostly comes down to one concept: Visual hierarchy.

Visual hierarchy is a term used to describe the order in which the parts of a design are interpreted. Visual hierarchy and the Gestalt Principles directly relate back to the grid structure because these determine how easy a design is to understand — in other words, how legible it is.

A grid helps ensure there is consistency in the design and helps ensure content is organized in a way that follows the Gestalt Principles. Text and imagery should be intentionally arranged in a way that causes humans to subconsciously group related content together, and visual hierarchy should be used to deliver the most important information first.

Following these principles results in content that is presented in an intuitive way which is easy for the user to understand and, therefore, a more effective design.

How developers use the grid

Web development, along with most forms of code or markup languages, is directly based on math and algebra. As a result, developers love the grid.

Not only does the grid ensure the aspects of a design are consistently spaced, it allows us to use a global foundation for creating webpages and templates rather than placing everything by hand. The benefit of this is not only consistency but efficiency as well.

The developer can configure the grid structure once, or as needed, to create the base structure on which the entire site will be built. This also helps with responsive design by allowing the designer and developer to more easily determine the behavior of elements by deciding how many columns they should span on certain device sizes and how they should be aligned within their bounding box.

Grid variations

The most common number of columns used for a website grid structure is 12. This number allows content to be arranged in any denomination of 12. Meaning, a 12-column grid can easily be used to create a 2-column, 3-column, 4-column, or 6-column layout.

Due to the amount of content that can effectively be displayed on a webpage, there is usually never a need to use more than 12 columns.

Breaking out of the grid

Although we always use some form of a grid structure, sometimes we need to break out of it. Abstraction or placing certain visual elements outside of the grid can actually help support your visual hierarchy by guiding the focus of the viewer towards a specific part of the page.

From a development standpoint, breaking the grid means you sometimes need to sacrifice the ability to use the global structure for that area of the design due to needing a custom layout.

From a design standpoint, frequently breaking out of the grid reduces its effectiveness and results in a design that’s less visually intuitive.

However, this is dependent on what aspects of the design aren’t following the grid structure. For example, a graphical element can effectively be placed outside of the grid to help guide the user’s eyes towards the grid or further down your design’s visual hierarchy.

Text content should usually be arranged within the grid to ensure it can be read easily at a glance while skimming the page.

What do marketers need to know about the grid?

The purpose of the grid, and design as a whole, is to deliver content in an effective way. When building a website on a CMS like HubSpot or WordPress, most of the grid structure may already be in place, but there is always some flexibility in the way the modules of a webpage template can used.

Marketers should pay close attention to the organization of content and the behavior of users to present this information in the most efficient way possible.

Elements of a Great They Ask, You Answer Website
Elements of a Great They Ask, You Answer Website

Free Course:

Elements of a Great They Ask, You Answer Website

Transform your website into your best salesperson and get set up for inbound marketing success!

In this course, you’ll learn:

  • What content and features your website needs to succeed with inbound marketing
  • How to design your website to best educate your audience
  • How to gradually make improvements or redesign entire elements of the website

Topics:

Web Design
Published on November 6, 2019

Recent Articles

8 Crucial Elements Every Homepage Should Have [+Video]
January 15, 2022 • 6 min read
What Does a Great Inbound Marketing Website Look Like in 2022?
January 10, 2022 • 11 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
5 Prep Secrets for a Smoother, More Successful Website Project (+ Infographic)
October 14, 2021 • 7 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
ICYMI: Digital Marketing News Update for July 26, 2021
July 26, 2021 • 6 min read
ICYMI: Digital Marketing News Update for July 19, 2021
July 19, 2021 • 6 min read
What the Heck is Going on With All the Google Updates? (Content Lab, Ep. 54)
July 15, 2021 • 1 min read
8 Best Business Website Designs (Updated for 2021)
July 15, 2021 • 5 min read
ICYMI: Digital marketing news update for July 12, 2021
July 12, 2021 • 5 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read
What is a Featured Snippet? [Definition + Examples]
June 10, 2021 • 4 min read
Google June 2021 core update live, July core update coming
June 4, 2021 • 3 min read
Google's June page experience core update will be mobile first, then desktop
May 21, 2021 • 3 min read
Every website agency talks about strategy; How is IMPACT different?
April 19, 2021 • 5 min read