Web Design Background

Grid Systems & Grid Theory in Website Design

  • 9 min read
  • June 28, 2024
Grid Theory in Web Design

Grid systems form the foundation for many pieces of design work. But, how do we use grids and grid theory in website design? What is grid theory? 

Whether you create online website designs or work in print creations, chances are you’ll have used grids at some point in your design work. Grids often form the basis of most visual designs. At KIJO, designers utilise grid theory and implement grid systems in the website designs that we create for our clients. 

In this article, we’ll take a look at grid systems and grid theory for web design, and analyse how grids can help to create appealing and attractive websites.

What is Grid Theory?

Grid theory refers to the concept of using grids, usually made up of a series of intersecting straight or curved lines, to structure your content. Grid theory focuses on allowing designers to create designs that are balanced and in proportion, helping to ensure they are appealing to the human eye. 

Using grid systems in design isn’t a new concept. In fact, it dates back hundreds of years. If we look at how ancient manuscripts are laid out, we can see that they follow a grid layout to present writing and drawings on the page.

Thanks to the Industrial Revolution, which saw newspapers and printed press become available to the masses, grid designs became even more popular. Newspapers and magazines all followed a grid layout and most continue to do so.

Various designers of the 21st Century also used grid theory to base their designs around. Jan Tschichold, a German calligrapher, typographer and book designer, famously opted for grid layouts coupled with plenty of white space. He is widely known for defining the elements of asymmetrical typography, made possible by using grids and grid theory.

The Purpose of Grid Theory

So why do we need to use grids in website design? When it comes to designing websites, grid systems have many purposes including:

  • Grids give websites shape and hierarchy, helping to create a great user experience.
  • Grids help to create a clear sense of navigation for users.
  • Grids help to ensure web designs are responsive. A grid-based layout allows designs to easily adjust to fit on different screen sizes. 
  • Grid theory helps your designs to appear well thought-out and professional as opposed to something that you’ve just thrown together. 

Types of Grid Systems 

When it comes to using grid systems in design, there are five main grid types that web designers can look to.

Baseline Grids

A screenshot of Smash Wear - a website that demonstrates an example of Baseline Grids

A baseline grid focuses on where the text sits within your design. This ensures readers can comfortably read your content. Baseline grids are mainly used in print designs such as newspapers and magazines, but it’s still an important principle for web designers to consider. 

Baseline grids essentially refer to the spacing between each baseline of text. If you have a lot of text to include on a webpage, using a baseline grid ensures you create a legible balance between text and white space.

Manuscript Grid

A screenshot of Travel 101 - a printed magazine that offers a good example of manuscript grids

Manuscript grids are used for all printed text documents, such as books and magazines. It’s a single column grid structure that’s simple and acts as a bounding box for any text on the page. 

Manuscript grids take the form of a large rectangle, within which all of the content (usually text) sits.

Column Grids

A screenshot from Hartmann - their brand portal offers a good example of what's meant by column grids

A column grid is exactly what it sounds like. Column grid systems are made up of multiple vertical columns. In website design, you can have anywhere between 2-16 columns that span the whole width of the landing page. Designers can then place content and imagery into single columns, or spread content across multiple columns. The space in between the columns, called the “gutters”, should be equal. 

Column grids don’t have to be symmetrical though. In fact, one of the most popular uses for a column grid takes an asymmetrical form. Here, the main content of the webpage spans across two-thirds of the columns whilst the secondary content, such as a sidebar, fills the rest.

Modular Grids

An example of modular grids displayed through the screenshot of a website

Modular grids follow the same basic premise as column grids but bring rows into the equation. The modular grid is very popular in website design and one of their most common uses is for product listings. Many websites use a modular grid to display rows of products in a clear and easy-to-navigate way.

Hierarchical Grids

the New York Times website offers a good example of what's meant by a hierarchal grid

Hierarchical grids are the most common grid systems used in website design. A hierarchical grid system helps designers to display content on a webpage in order of importance, with the most important content at the top. 

These grids are usually created by placing the most important content on the page first, and then creating a grid around it. This means this type of grid system can be a little more flexible but still features the common columns and rows. 

Elements of Grid Systems

There are various elements that make up the grid systems we use in website design. Below, we’ve listed some of the key terms web designers need to know.

Units

Units are the individual elements that make up a grid layout. For example, in a column grid that’s divided into 10, each section is a unit. This means the grid is made up of 10 units.

Gutters

Gutters are the spaces between the elements within your grid. Often in a website design these will be made up of white space. This gives your design some much needed breathing room and prevents a web page from looking overcrowded. 

Columns

Columns are created by combining units and gutters together. For example, you may have 12 units and 12 gutters that you divide up to create 3 asymmetrical columns to place your content in. This then allows you to place your content strategically on the page, adding your most important content to the largest column.

Fields

Columns of content can join together to form fields – horizontal batches of content on a web page. Usually, as you scroll down a web page you will discover new fields of content within the hierarchy of the grid design.

Examples of Grid Theory in Practice 

Let’s take a look at some of the different types of grid theory in practice. 

Twelve Unit Grid

The Elementor website uses a 12 column grid design. This is a screen shot of that.

A twelve unit grid is where your page is divided up into twelve units, like website builder Elementor’s blog page here. Twelve unit grids are one of the most flexible grid systems as you can then divide them up into four, three or six column grids and make them either symmetrical or asymmetrical.

Four Column Grid

The Uber website uses a four column grid design for the footer of their website pages. This is a screen shot of that

A four column grid is a simple grid system that’s symmetrical and allows you to balance your content across the page.  However, the simplicity of a four column grid can make web pages look a little boring and it can be harder to determine a hierarchy within your content. They work well in footers though, like ride-hailing service Uber’s website.

Three Column Grid

The Aesop website uses a three column grid design on their product pages. This is a screenshot of that.

A three column grid is made up of three equal columns that each contain four units. Again this is a symmetrical grid system that allows you to display your content in an engaging and visually appealing way. High-end skincare brand Aesop uses three column grids on their product listing pages.

Six Column Grid 

The AirBnB website uses a six column grid design. This is a screenshot of that.

Content-heavy websites may opt to use a six column grid, where each column is made up of just 2 units. This grid system allows you to fit a vast amount of content onto the page without overcrowding it or overwhelming users. You can examples of a 6 column grid on Airbnb’s site – the online marketplace for short and long-term home stays and experiences.

Grid Systems in Web Design

Now that you’ve got to grips with what grid systems are and how to use grids in design, you might be ready to try it for yourself. Just remember to keep the below in mind:

  • Grids should be the first thing you think about
    Create the grid for your landing page first and then start adding your content in. You can replicate the grid for the rest of your landing pages too. 
  • You can break the grid if you need to
    Just because you’re using a grid as the foundations of your design, doesn’t mean you can’t break it. If you think content will look better displayed in a way that breaks the grid’s structure then go for it! 
  • Stay loyal to responsive design
    Make sure the grids you opt for will respond to different screen sizes and devices. In other words, responsively designed.  If your grids are fixed to a baseline grid, they won’t respond well on other devices, negatively impacting your user’s experience. Ensuring your grid system is fluid is key. 
  • Make use of white space
    You don’t need to fill every single bit of space on a web page. In fact, white space or negative space is a key website design feature. White space helps to stop your design feeling overwhelming and helps ensure a good user experience.
  • Consider the Golden Ratio
    When looking to improve your sizing, balance and layout of your grid design, consider referring to the golden ratio. This concept can help ensure your website design is as visually appealing as possible. Read our article on The Golden Ratio here to learn more.

Grids and Grid Systems Are Everywhere

As you can see, using grids and grid theory in website design comes with a lot of benefits, namely creating a balanced and beautiful web page. The theory behind using grids and grid systems in design dates back centuries. Grid designs are all around us. However, because they’re so present it’s hard to notice them!

We’re specialists in web design and work with grid systems daily. Grids help us form the foundations of our award-winning client designs. If you’re interested in finding out more about KIJO’s work and our website design services, be sure to get in touch with us today.

How to Follow Up a Sales Lead Like a Pro

How to Follow Up a Sales Lead Like a Pro

Sorry, your browser does not support inline SVG.