Grid

We use a horizontal grid of 12 column grid to keep our content look consistent and harmonious. Our grid system is used mainly in two ways: 1) To fill allowed width using 2 or more columns, 2) To center align a single column of variable width.

Grid wrapper

When using the grid, wrap the columns using a containerclass.

Class Names	Parent / Variants / Helpers / Sibling	Usage
`.container`		Wrapper for our grid. All direct childs must be `size[X]of[Y]`classes. E.g. `size1of1`, `size4of12`, `center-size8of12`
	`.container--wider (V)` `.is-wider (old)`	For wider layout width, i.e., 1120px. Used in Discover, overlays and pages without tertiary navigation.
	`.container--widest (V)` `.is-full-width (old)` `.has-full-width (old)`	For full page layout, i.e., 100%, no space on sides. Used in full page overlays.
	`.w-margin (V)`	Add space below, i.e., 30px
	`.w-margin--more (V)`	Add more space below, i.e., 40px
	`.is-centered (V)`	Center align the `container`
	`.has-bg (V)`	Add lightest background color `$color-grey-05`

Grid column sizes

We use following grid sizes in our layouts.

Notes

The container class is always direct parent for any size1of1, sizeXof12, or center-sizeXof12 class.
There should be no other direct child of container apart from size1of1, sizeXof12, or center-sizeXof12 class.
Thelast is always used for last size class to set margin-right to 0.
When 2 or more size classes are used, their sum should be 12. For example, .size4of12and .size8of12

Class Names	Parent / Variants / Helpers / Sibling	Description
`.size1of1`	`.container (P)` `.size1of1 (S)`	Spans full width of containter div.
`.size1of12`	`.container (P)` `.size11of12 (S)` `.last (S)`	Spans 1 column. Mostly used for text (on left) with button (on right).
`.size2of12`	`.container (P)` `.size10of12 (S)` `.last (S)`	Spans 2 columns. Mostly used for text (on left) with button (on right).
`.size3of12`	`.container (P)` `.size9of12 (S)` `.last (S)`	Spans 3 columns. For navigation sidebar.
`.size4of12`	`.container (P)` `.size8of12 (S)` `.last (S)`	Spans 4 columns. For navigation sidebar or 3 same sized boxes.
`.size5of12`	`.container (P)` `.size7of12 (S)` `.last (S)`	Spans 5 columns. To size toolbars, tabs, etc.
`.size6of12`	`.container (P)` `.size6of12 (S)` `.last (S)`	Spans 6 columns. Used to create two same sized boxes.
`.size7of12`	`.container (P)` `.size5of12 (S)` `.last (S)`	Spans 7 columns. To size toolbars, tabs, etc.
`.size8of12`	`.container (P)` `.size4of12 (S)` `.last (S)`	Spans 8 columns. Used for content with sidebar.
`.size9of12`	`.container (P)` `.size3of12 (S)` `.last (S)`	Spans 9 columns. Used for content with sidebar.
`.size10of12`	`.container (P)` `.size2of12 (S)` `.last (S)`	Spans 10 columns. Mostly used for text (on left) with button (on right).
`.size11of12`	`.container (P)` `.size1of12 (S)` `.last (S)`	Spans 11 columns. Mostly used for text (on left) with button (on right).

Centered grid columns

Used for single column of content that is center aligned. Note: The container class is always direct parent for any center-sizeXof12 class.

.center-size10of12

.center-size9of12

.center-size8of12

.center-size7of12

.center-size6of12

.center-size5of12

.center-siz4of12