What is a grid system?

a structure composed of a series of horizontal and vertical lines, used to arrange the contents

Almost all sites these days are designed on a grid system for arranging elements on the page. It allows us designers to provide a system that can work with a solid structure and present content and images in a much more readable and manageable way. Grid systems have always been used in the print industry as a standard, but their transition into web design has allowed web designers to achieve a level of consistency that would otherwise be difficult to achieve.

The grid system will inevitably be invisible to the end user, but will allow for a site that users will find easy to navigate, read and understand. This is very important as the lack of alignment of the elements is very noticeable and creates a sloppy impression. This could very well lead to a lack of trust from users visiting your site.

So, in short, a grid system is just a skeleton for your design, a structure made up of a series of horizontal and vertical lines that intersect and are then used to organize content.

How we will use it

In the image, the main container is 1280 pixels wide and uses 12 equal columns with a 16 pixel gap between them or « gutter ». We use an 8-point grid spacing system to manage spacing based on screen resolution —

• @1x resolution: 1pt = 1px

• Resolution @2x: 1pt = 4px (resolution doubles on both X and Y axes, so 2px wide by 2px high)

• Resolution @3x (@3x): 1pt = 9px (3px x 3px)

Multiples of 8 are used for spacing. This results in good vertical pacing so that our designs appear deliberate, professional, and coherent:

• Space between columns: 16pt

• Space between sections: 80pt

• Space between paragraphs: 24pt

• Space under smaller headings: 16pt

• Space above h1 and h2: 64pt

• Space above smaller headers: 24px

• Button Padding: 16pt 32pt

An example of this is shown below in the image:

We measure by the height of the line, not the baseline. Line height is the bounding box created around text on the web and in Sketch. We use this approach for a variety of reasons:

• Avoid manual adjustments in Sketch when aligning layers

• It is the « natural state » of the browser

• Avoid complex CSS calculations

• It’s easier to achieve consistency

• It’s easier to maintain

Advantages of a grid system

• Useful to start planning a new site and for future developments
• It allows you to design in proportions and be flexible at the same time.
• Helps with responsive design layouts, such as tablets, phones, and smaller screens.
• Uniformity and familiarity

Disadvantages of a grid system

• It can limit creativity
• The concept can be confusing for new designers
• It can involve complex calculations and math

Conclusion

In modern web design grids are essential for designers to provide an enjoyable and consistent user experience. They also help sites in the long run by making them easier to maintain and develop for new features. Grids are also useful when tackling challenges like responsive design, which allows designers to present content consistently across a range of devices and screen sizes. Using our custom grid system will allow all team members to deliver content, navigation and information in a consistent format to the end user.

This article is part of our ongoing Design Systems series. Learn more about our digital design system