The .grid class defines the grid context which will be the parent fot the .grid__items.
The .grid__item class defines the single grid element and can directly contains the element content but you should not mess with padding on this elements.
The optional .grid__box class defines the inner content of grid element and will be the context for the element content. You can do whathever you want with margin and padding o this elements.
Size classes are defined per breakpoint and work only into the defined breakpoint, so you can develop desktop-first or mobile-first as you prefer.
Breakpoints are large, medium, nml* (nomensland), small and micro*. You can define them in the _mq.scss file.
If a .grid__item does not have a size class applied it will always be large as the container.
* The nml breakpoint is an optional one that overlaps between the small and medium ones.
The micro breakpoint, when used, overrides the small one.
If you want you can rename the breakpoint size classes name to better fit your needs.
Every size class has many modifiers to define the width of the element.
The grid could be used with 12, 10, 6, 5, 4, 3 and 2 columns and with a main-sidebar “golden ratio”, and you can mix the widths without define how many columns form the grid.
For example, if you want an element to be 1 half of the grid container, you can define an element as large--6-12 or large--1-2, or every other class with a 1/2 ratio.