Using Grids in Web Design

Grid? What is it for?


People have always intuitively used the sense of proportion. It is easy to confirm, because since the earliest civilizations we can see the connection of proportions with measurement and construction, the placement of objects relative to each other in space.

Grids, as a markup, a system of reference lines, were used to make construction plans and break down the territory, Renaissance artists used it to enlarge their sketches, and in cartography grids were the coordinate basis on which military plans were made.
In the designer’s work, when layouts consist of different elements, the grid helps to organize them. The grid allows, without calculating each distance and size separately, laying the key patterns in its construction only once, then simply reuse them.

For example, the grid allows you to observe the rule of proximity theory (you can also find this rule among the Gestalt principles of perception) and, in particular, the rule of external and internal, according to which internal distances must be smaller than external ones.


Once you start using the grid, it is hard not to notice its advantages:

  • the grid defines a unified design style, rules for the arrangement of elements, alignment, adding new elements to the layout;
  • speeds up work with the layout, because when you follow common rules, the time to decide where, what, and how it will be located is minimal, and also allows you to get a predictable result when working in a team
  • reduces the likelihood of errors in the overuse of components layout. Component-based approach is used by developers in their work, so components allow the team to work in sync, easily maintain changes and save time;
  • layout looks more aesthetically pleasing, elements are proportional and structured. In addition, if a grid is used in the design, it helps the user read the information faster. The grid creates visual order and orientation becomes easier.


What grids are.


Depending on what is taken as the basis for the grid, we can distinguish the following types: block (based on a block), column (columns), modular (module), hierarchical (visual weight and location of elements relative to each other).


Block or manuscript grid

is the simplest type of grid, which is usually used in print publications. Typically, such a grid is a standardized rectangle that contains the content on the page or screen.

As an example, simple pages of blogs, articles, news articles, where the pages are designed to be solidly read.


A column grid

is a grid that has columns in its structure. The width of the intercolumn (gutter) is determined by his purpose, if he simply separates the elements from each other, it is reasonable to make his width the minimum necessary, but it should be in any case, noticeably larger than the line spacing, so that the lines in adjacent columns not look like extensions of each other.

The main blocks are aligned to the vertical columns, a narrow intercolumn is used. Note that for ticket prices, the dollar symbol is moved outside the column, as it has less visual weight than the price itself. Thus, the designer has resorted to optical compensation, visually lining up the column’s vertical line relative to the “heavier” price figures of 39-67.
A wide intercolumn can be a design decision.

A modular grid

is characterized by having both a vertical termination and a horizontal termination. What is formed at the intersections is a module – a rectangle with a given height and width that underlies the composition. The grid determines how the layout will look like as a whole and where individual elements will be located: text blocks, headings, images.

An example of a modular grid from book printing, where the grid contains 4 columns and 4 rows. An image or text block can take up one or more modules.
An example of creating a page concept with the main blocks placed on a modular grid. The module is the union of two columns and two horizontal rows.
An example of a modular grid where a square block of a given size is used as a module.


Hierarchical

a grid with intuitive placement of blocks, which focuses on the proportions and visual weight of elements in the design. This type of grid is often used when content is not standardized and uniform. Often found for business domains related to fashion, photography, art.


The most difficult to build is a modular grid, it includes the construction of columns. So let’s look at the principles of its creation.

Principles of constructing a modular grid

Modular grid is a tool, but not a method, so before you create a grid, you should make a rough page layout, think through the elements that can be used, and only then proceed to create it. To build a modular grid, you must first build a base grid, then apply a column grid to it, and by setting the module size, we will get a designer grid, i.e. your designed for a particular project.


So, let’s start with the base grid. It resembles millimeter paper. It will allow you to move the smallest elements of the layout, keeping all the distances between them equal and uniform. The pitch of the grid depends on the indivisible elements (atoms) of the layout. They can be a base font and line height, a radio button, a checkbox, the minimum distance between visible blocks of content, for example, between photos in the gallery or product cards.

An example of a basic grid is the 8-pixel Material Design component grid.
An example of aligning popup elements to a basic 8-pixel grid. All elements and the distances between them are multiples of 8.


Why 8-pixel?

A block of 8×8 pixels was chosen as the step for this grid because most popular devices have a multiple of eight pixels screen size, therefore it would be easier to design interfaces for them with this system. In addition, if all numerical values are even, it becomes easier to scale sizes and distances for a wide range of devices, keeping the design in its original form.
For example, devices with a resolution one and a half times larger than the original will have problems rendering odd values. Increasing an element five pixels in size by a factor and a half will result in a half pixel offset.

There is also a recommendation to use an 8-pixel grid in Apple’s Human Interface Guidelines.


Why not 10?

Because, again, most devices have a multiple of eight in pixel size, and the 10-pixel grid introduces more restrictions on element sizes.
8,16,24,32,40,48,56,64,72,80,88,96,104,112,120 15 dimensions
10,20,30,40,50,60,70,80,90,100,110,120 12 sizes
Eventually you may decide to use both the 10 and 6 pixel grids as your base grids. The main argument for choosing them should be the convenience of working, following the chosen rules and their support for you and your team.

An example of using a 6 pixel grid.


The concepts of Hard and Soft grids


There are two approaches to using a basic grid.

  • When using a hard grid, all elements are a multiple of the base grid block, for example 8 if we are talking about an 8 pixel grid, and are placed strictly on the grid.
  • The second approach is the soft-grid, which boils down to using distances between elements that are multiples of 8 in our case.


The main advantage of using a hard grid is that no matter how you group the elements together, you can always control the inner and outer indentations and move the containers of elements around like bricks. Material Design, where everything is designed using a 4-pixel grid (typography, icons, and some other elements are designed using a 4x pixel grid, and other components using an 8 pixel grid) is usually fully consistent with this method.

4x pixel grid Material Design.


The good thing about a soft grid is that when it comes time to layout your layout, using a grid is more likely to cause difficulties because programming languages do not use the same structure to specify meshes. When speed of implementation comes first, soft grids are more flexible and minimalist in their code structure. It will also be preferred for iOS design, where most system graphical elements are not defined by a hard grid.


Vertical rhythm.

When choosing a base grid, it is important to remember that the pitch of the grid must fit evenly with the height of the main text line. Let’s say you’ve chosen a font with a font size of 16 pixels as your base font, then according to the recommendations of modern typography the interlineage will be 150-200% of the size (sometimes more). In order for the 8-pixel block of the base grid to fit evenly into the height of the line, you can choose a value of 24 pixels as the interlineage. Based on this line height of the main text, you can vary the layout and follow the vertical rhythm.

Left: building a vertical rhythm based on the baseline and interlineation. Right: building a vertical rhythm based on line height


Which approach to take will depend on the skills and experience of the team, because native mobile apps have the ability to work with a baseline of text, but it’s harder with a browser. You’ll have to work from a baseline and then use very specific intervals to make your content align.

This means that each design element will now occupy a certain number of lines in height. Rhythm is easy to work with, you measure everything in lines, not pixels. For example, the first level menu and header are 2 lines, the image is 8 lines, the button is 1 line, the indent is 1 line, etc.

Vertical rhythm as an example of using lines that are the same height as the base grid block.


Column grid

The column grid is responsible for horizontal rhythm, which you can get by choosing a column width to indentation ratio that makes it easy to change the position of larger blocks.

Why is the 12-column grid so popular?

Because the number 12 is divided into: 12, 6, 4, 3, 2, 1. Therefore, the grid is flexible and allows you to layout blocks of almost any number or width. Moreover, by discarding 1 or 2 columns as margins on the edges of the layout, you get a block in the center that is also divided by 10, 5 or 8.


What to consider when building a column grid

  • Breakpoints

In adaptive design you need to keep the layout structure and neatness of information for all resolutions, so layouts should be made for all control points. Columns of the grid can remain static and be added as the screen width increases, and elements can change their position by obeying the column rhythm and breakpoints. These can be 480, 600, 840, 960, 1280 and 1440. And for each screen resolution, respectively, will be a different number of columns. As a detailed example, we recommend reading the Material Design responsive layout grid. With a hard deadline, you can choose the most popular 2-3 transition points using your resource’s or your competitors’ web analytics.

Example of reusing Material Design responsive laoyout grid transition points for an internal EPAM project

Or you can keep the number of columns for all the transition points and change the size of the columns and inter-columns between them proportionally.

Using a 12-column grid in the card example for EPAM’s internal Events project


For a better understanding of how responsive layout works, where, when and how it is used, as well as the concept of responsive design, see our video about designing websites and pages for different devices

An example of calculating a grid for a transition point of 1280 pixels.

Determine the number of columns. For example, there will be a gallery of six photos with text descriptions, two large graphics and three paragraphs of text. Then the number of columns should be a multiple of 2, 3 and 6. A number of 12 will do. Dividing the grid area of 1280 pixels into 12 columns with gutters of 20 pixels would produce 85 columns of width while leaving an indentation of 20 pixels to the left and right edges. So you have 12 columns of 85 pixels, 11 gutters of 20 pixels, and 20 pixels left and right margins.
1280px = (85px12)+(20px11)+(20px+20px)
This distribution gives combinations of elements of different sizes.

The concept of Fluid Grid or “rubber” grid is also used in the web. Its peculiarity is that its distances are not specified in pixels, but in percent. For 100% is taken content area. Below is a simplified example for a 1000 pixel wide layout with 6 columns.

Designer Grid


Having constructed the base grid, and having defined the column grid, we get the intersection of columns and rows, which forms a module – the basic unit of the modular grid. When choosing a module size, you should keep in mind that a module that is too large will produce an inflexible grid, a module that is too small will be meaningless. Modules can and should be combined into groups, so we get a design grid – the final version of a modular grid designed for a specific project.
As a rule, you are practically limited to a combination of a base grid and a column grid, since development and maintenance of a designer grid is rather labor-intensive.

The designer’s (final modular) grid may consist of two narrow columns on each side and one wide one in the center. It can be of identical columns with wide indents, or it can consist of “floating” columns (when two, when five), but so that it becomes visible by repeating the layout of materials and nesting “less in more”.

Column enlargement for the first and third global resource sections.

Grid within a grid


If the project is complex and multi-component, it is possible to use several nested grids. For example: the layout uses columns with large text, and inside one of them lies a calculator form with a bunch of controls, laid out on a square 4-pixel grid. In addition, some of the content can be extraneous and embedded at all: players, online cards, widgets, payment frames, etc. These elements will have their own internal grids that you have no control over. What you can do is follow the inside-outside rule for containers containing these blocks, give enough air (including vertically) around them so they don’t stick to the rest of the content, look detached and drag extraneous elements into their visual zone.


In lieu of a conclusion…


Don’t start your search for a design solution by building a grid. First you need to:

  • decide on the structure of the page and make a rough sketch of it, even on paper;
  • get the high-priority blocks into a consistent layout;
  • then build a rough grid of your design ideas;
  • Grid in blocks whose location is not crucial.


Only now can you begin to work through the grid:

  • Choose a base grid pitch based on the typography you’ll use and the size of the basic elements: buttons, input fields, checkboxes, etc. You can limit your support to vertical rhythm only, based on the line height of the base font;
  • determine the optimal number of columns depending on the content structure;
  • choose the number of transition points you will support;
  • build a column grid and try to arrange the key elements of the interface;
  • determine the module size that will allow you to create content blocks (you can omit this step, in practice it is rarely used due to the labor-intensive support).


Important! The grid should not dictate, but help in the design. Therefore, you can deviate from the grid! There is no need to align everything unconditionally on the grid. If some block does not fit into your grid in any way, you don’t have to adjust it.


Try it and you will succeed!

Share