Why We Love GRID (And You Should Too!)

What is grid?

Grid is a system of horizontal and/or vertical guidelines that are dividing the graphic design into modules. It was used (in slightly different way) since the begging of the written word, but its usefulness was especially appreciated by typographers of modernist era. Right now it is coming back into favor and is commonly used by webdesigners in the form of ready-made frameworks such as Bootstrap, Zurb Foundation or Gridle.

Why you should use grid?

Grid allows you to arrange and organize in the most logical way possible items such as headers, texts, buttons, text boxes, pictures or icons. Although grid is ancillary, its consistent use adds a harmony to the project and increases the aesthetic value of it. It also allows for an easy communication between Graphic Designers and Frontend Developers. Working on grids which are based on a specific technology allows for a faster and more accurate implementation of graphic design. Designers don’t have to divide the space in the project and the Frontend Developer can use ready-made CSS classes. Grid allows for a more rational approach to design. We can stop relying only on the intuition of Graphic Designer and base our work on the system that is understood by everyone.

How does this work?

In general, each grid consists of a number of lines which divide the screen into columns, which are separated by gutters. In Merixstudio we think that there is no need to create a separate grid for each project - the system that we have developed is flexible enough to allow us to create a wide variety of projects by modifying the underlying assumptions. To creating our grid we used two already existing frameworks/systems: Bootstrap and Material Design.

We treated Bootstrap as the base, but this does not mean that we use it in the context of Frontend Development. We like the versatility of its structure, which allows for implementation of flexible changes of columns widths and distances between them. The structure of our grid is based on the container, inside which there are 12 columns. It has a fixed width measured in pixels (different for a each resolution) and the columns are determined in percentage. Each column has its own padding that simulates the gutter.

The number of columns is not coincidental. It has a lot of possibilities for dividing (12, 6, 4, 3, 2, 1), what facilitates the design and further development. Since this is an even number, you should avoid layouts with an odd number of columns, for example. 9, 7 or 5 (with the exception of the number 3).

Material Design offers an interesting baseline grid system. Elements (inputs, buttons, tables) are entered in the grid 8px, the typography in the 4px grid. Grid 8px determines the size of tested breakpoints, columns and gutters. As a result, all the values in the draft can be divided by 8 and/or 4.

Breakpoints

Working with grids requires determination of the screen size for which the width of the columns and the layout of elements are changing. In Merixstudio we have established 8 breakpoints, but usually do not design in all of them - we are trying to flexibly refine many elements on the Frontend Development side of the project.

• 320px (4 columns)
• 480px (4 columns)
• 720px (12 columns)
• 768px (12 columns)
• 960px (12 columns)
• 1280px (12 columns)
• 1600px (12 columns)
• 1920px (12 columns)

As you can see all the breakpoints aside from the smallest ones are divided into 12 columns - this kind of strong division and although it is theoretically possible, never occurs in practice. Some breakpoints have their own additional margin (bleed), which reduces the size of the primary container to the number divisible by 8 and/or 4.

Practical approach

You should each time base your work on inserting elements and content in the columns of grid. Ideally, the content will always be leveled with internal lines (padding). The exception are the layouts without any gaps between components, such as adjacent thumbnails. In that situation you should line up elements to the edge of the column (or to the middle of gutter).

Lining up elements to the grid is not obligatory, but it should be seen as a good practice. However, if your super-creative idea for a layout can’t be placed in columns, you don’t have to force it just for the sake of using grid. Paddings are supposed to be treated very flexible and may vary depending on the project. It is important to create a set of rules for the entire project to avoid chaotic work.

Summary

The grid that we've created significantly changed the mode of operation of the entire software house. We are using one logical system in creation of mockups, designs and in Frontend Development, what allows us to have a better communication within the whole team. This ensures that our designs have a great quality and can be created quicker.