To control white space between elements we do not add padding or margins, instead we use separate elements with a predefined size.
The reason we use this method rather than padding or margins is so we can be more consistent across the entire website.
It also gives the ability to easily change spacing rules across the entire website and it is clearer where what spacing is used.

The layout system consists of rows and columns, where each row is divided up into 12 columns.
The total row width is controlled by the container element that wraps it all.

By adding a specific class name to the layout__col element you can make an element span across several columns.
For example by having 3 elements that span 4 columns we can create a layout of 3 columns (3 x 4 is 12).

Or 2 elements that span 6 columns to create a layout of 2 columns (2 x 6 is 12).

An element with only layout__col — without an additional class name — expands across the leftover space.
The possibilities are endless, you can make it as complex as you want.

First off we need to define the difference between the gutter and the gap.
In the SML class naming the word gutter defines the width between columns, gap is used to define the height between rows.
In the variable naming we only have gap sizes, those values are used for both the gutter and gap sizes.

The standard gutter and gap size is gap-m on desktop and bp-xs__gap-m for mobile.
The framework also comes with gap-s and gap-l for tighter and wider spaced columns.
Below an example with large gaps and gutters, and with small gaps and gutters.

There is a wide range of additional predefined class names available that control the layout of the different elements inside a column.

You can combine them to have control over both vertical and horizontal axes.