Grid system is a set of measurements a graphic designer can use to align and size elements on a website. In most cases we use the 8-point grid system.
Upon starting your design process, set up your Sketch artboards with an 8-pixel grid system. It should look similar to the following:
Use multiples of 8 to define dimensions, padding and margin of your elements. The only exception is text, where the 4-point grid can be applied in tandem. In cases of centred elements like input texts, non-compliance with the grid system is admissible.
In our layouts, we use gutters that match the 8-point grid system.
Related: Grid System
Use gutters matching the 8-point grid system: 8pt, 16pt, 24pt, 32pt or 40pt. Use container width as needed. Below is an example of a 24pt gutter in 12 column layout. Please be aware of the use of the colour from your selected theme.