The purpose of the grid is to provide designers and developers with a layout system as a tool in which componenents and patterns fill the designed space in a harmonious and consistent manner. We do this to provide consistent layout patterns with the purpose of providing visual readibiity and legibility and the user knowing where to look to find interfaces and information more easily.
Types of grids
We use 2 types of grids, one for mobile and one for desktop. Essentially, we only design for small and big screens. We don't use an in-between grid(tablet), for that we simply scale the mobile design over a tablet breakpoint instead. The grids are centralized to the viewport/artboard and should always place itself in the direct centre of the view, with equal margins on the outside of the grid(outer gutter).
Mobile grid (4 columns, 71px column, 17px gutter. Total width: 335px)
Desktop grid (12 columns, 60px column, 40px gutter. Total width: 1160px)