A grid system is a framework used in design to arrange elements in a structured and consistent way.

It consists of a series of horizontal and/or vertical lines that divide the page into sections and help designers place elements such as text, images and graphics in a way that improves clarity and aesthetic appeal. The number and width of columns and spaces often follow fixed structural guidelines or a design system. Aspects of perceptual psychology in particular play a decisive role here.

The consideration of factors such as the visual perception process*1, Miller’s number*2 and relevant design laws*3 – such as the law of proximity or the law of the common region – supports the perception process and forms the basis for easy accessibility.

A perceptual-psychological approach to grid design is very important, as a grid represents the invisible basic structure of the design and – even if it is later no longer visible to the user – is responsible for the compositional harmony and consistency of the entire design.

In addition, a consistently applied grid system can be a distinctive design element in itself, making the overall design recognisable, unique and aesthetically pleasing.

 

Grid vs. Layout Grid

A «Grid System» basically consists of a «Grid» and a «Layout Grid». The «Grid» consists of a certain number of units of equal size and forms the underlying grid system (marked red in the following illustration). The combination of these smallest cells creates a superordinate «Layout Grid» (marked in blue), to which the page elements in the design are aligned.

A grid system has different layers. The lowest layer is the grid, which has units of the same size.
There is usually only one cross-page ‘grid’ for a design, but a number of ‘layout grids’ depending on the page type. Here is an asymmetrical three-column layout grid for a content page from one of my recent projects. The left column contains the sticky inpage navigation, the middle column contains the page content, and the right column contains a row of function buttons.

Typically, there is only one cross-page «grid» for a design, but there may be different «layout grids» for different page types, such as one for the home page, one for the overview pages, and another for the detail pages.

 

Origin

Grids have their origins in 15th century book printing and were later integrated into the design process by designers such as Jan Tschichold, Josef Müller-Brockmann and the Swiss School*4.

 

What types of grids are there?

In addition to horizontally and vertically structured grids, there are also so-called «Modular Grids», which divide an area into units both horizontally and vertically. These grid systems are particularly versatile and are suitable for more complex layouts.

Horizontal, vertical and modular grid system

 

In the western world, where people write horizontally, grids that divide a surface into vertical sections are of little use in responsive web design because the height of the text columns cannot be predicted due to the responsive nature of the design.

Vertical dimensions can only be reliably planned for in web design if sufficient free space or buffer zones are taken into account. This makes a consistent vertical structure in a responsive context much more difficult and often impractical in practice.

 

Responsive Grid Systems

In the print sector, grid systems have long formed the basis of most designs. However, grids also play an important role in the design of interactive user interfaces.

While compositional aspects and readability requirements are the main focus in the print sector, the need to develop «responsive grids» is a central challenge in web design. Responsiveness in this context means that the design adapts optimally to the size of the output medium.

Responsive grids must therefore not only have fixed dimensions, but must at least partially use flexible units. There are two basic ways of doing this:

  1. Make adjustments to the grid dimensions via so-called «Media Queries»*5 (adaptive approach)
  2. Use percentage values for the grid dimensions (fluid approach)

Adaptive vs. fluid approach

Below are two different grids that I created with the «Ultimate Grid Generator». At the top, an adaptive grid system that is controlled by a series of media queries such as @media (max-width: 768px) { … }; and below, a completely fluid grid that works without media queries, using only percentage calculations for responsive adjustments. Try resizing both of them with the handlebars (bottom right) and see what happens.

Adaptive Grid

Adaptive adjustment via several media queries:

@media (max-width: 768px) { margin: 0 30px }

@media (max-width: 640px) { gap: 15px }
@media (max-width: 480px) { margin: 0 20px; gap: 12px }

Fluid Grid

Fluid adjustment of the grid with the relative CSS unit vw:
margin: 0 max(15px, 4vw) und gap: min(30px, 4vw);

 

Benefits of Grid Systems

Structure meets aesthetics: grids create a clear structure and a uniform appearance.

Efficient work: Using a grid system supports and simplifies the design process of visual applications and systems, such as websites or print media.

Accessibility: Studies*6 show that designs with a structured layout can improve comprehensibility for the user by up to 50%, making grid systems an effective factor for effective communication.

 

Challenges in Grid Design

Many designers find the creation and planning of responsive grids extremely tedious. In particular, calculating the necessary parameters is not so trivial, as all grid parameters are interrelated. See the following equations.

Equation for calculating the grid widths.
Equation for calculating the grid widths. Above, the equation has been rearranged so that the column width (cw) and below the grid width (gw) can be calculated.

 

There are three options for the even distribution of columns in CSS:

  1. ‘space-between’ distributes the free space between the columns so that the first and last column are aligned directly to the edges of the grid.
  2. With ‘space-around’ 50% of the free space is added to the right and left of each column.
  3. With ‘space-evenly’ the free space is evenly distributed both between the columns and outside the columns.
Distribution options for columns in a grid

 

 

Design Basics

Many designers are also not familiar in detail with the design principles that later increase efficiency when placing elements and have a positive effect on the layout. It is therefore very important to understand the basics, i.e. the design laws themselves, in order to be able to work “creatively” with a grid system and not just follow best practice examples without reflection. For example, many designers unthinkingly create grid systems with 12 columns. Very few know the reasons for this, they simply follow certain standards without knowing when it can make sense to deviate from them.

The reason for using a 12-column grid is that the number 12 is a so-called «Highly composite number»*7, i.e. a number that can be divided by more integers than any other smaller number. Apart from the fact that every number is divisible by 1 and itself, the 12 can be divided by 2, 3, 4, 6, whereas a 10 can only be divided by a 5. So a 12-column grid allows four times more flexibility in dividing the layout grid into different column combinations than a 10-column grid.

 

Recommendations for Grid Newbies

I therefore recommend that grid newbies familiarize themselves with the basics of grid systems by reading the following articles:

History & Overview
Guides
Design Basics / Gestalt-Principles
Technical Aspects (CSS)


If you understand the design basics of a grid, it will be easy for you to design grid systems that are both accessible and flexible. This will provide you with an essential foundation for a coherent user experience.

 

Ultimate Grid Generator

For designers who find it particularly difficult to calculate and evaluate grid dimensions, I have other help on offer: I have developed a small, but very helpful application, the «Ultimate Grid Generator», which helps you to create a grid system and evaluate it responsively in real-time. Just give it a try: Ultimate Grid Generator

 

The application is free of charge and the grid systems created can be easily exported as SVG, PNG or HTML for use in other applications such as figma. I am convinced that this tool will make it easy for you to design a responsive grid.

 

References

*1: https://www.nngroup.com/articles/how-people-read-online/

*2: https://www.userbrain.com/blog/millers-law-important-rule-ux-design-everyone-breaks

*3: https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/

*4: The Swiss School

*5: Media Queries are a CSS technology that makes it possible to adapt specific parameters of a website based on the characteristics of the user’s device or display window. This allows a design to be optimally adapted to different screen sizes.

*6: Studies on the effectiveness of grid systems

*7: https://en.wikipedia.org/wiki/Highly_composite_number