Grid is used to align only primary content. The top-level components, such as sidebar and header are used outside of the grid.
Our grid has 12 columns on screens > 786px and 4 columns on smaller screens. 4+ column cells will become full width. Items warp and grow to fill the width of the row, so be careful to not end up with 5, 7, 8, 9, 10 or 11 columns worth of items in a row, since that will break the grid. In general make sure it adds up to 12.
Avoid using 1-column cells with content. They can get as narrow as 18px.
Spacing between columns and on the sides - 40px (> 960px), 28px (> 768px & <= 960px) and 12px (<= 768px).
Notice the importance of having one child element inside a cell. This is a workaround for IE not respecting `box-sizing: border-box;` when setting the element size with `flex-basis`, instead of having paddings inside the cell element, margins are added to the child.