## Layout grid

Layout grid in Superdesk is based on flex grid and works very similarly to the standard float grid. It has 12 columns setup, and column gutter of 10px so that the space between two columns is always 20px.

If there is a need to have layout grid inside an element which already has default padding (like modal body for instance), just add modifier `.grid--padding-fix` to div `.grid`.

### Default Layout grid (not responsive)

Add grid container with class `.grid`, and nest grid items inside. For example, grid item will be `.grid__item` with additional modifier class `.grid__item--col-3`, so number of columns is set as a modifier on a grid item div. To have a full row width, sum of items columns should be 12.

Example Markup
col-3
col-6
col-3
col-3
col-3
col-3
col-3
col-2
col-8
col-2
col-6
col-6
col-4
col-4
col-4

                            col-3
                            col-6
                            col-3

#### Nested grid

To have layout grid inside another one, just add whole `.grid` structure to `.grid__item` div.

Example Markup
col-4
col-6 (nested)
col-6 (nested)
col-4

                            col-4

                                    col-6 (nested)
                                    col-6 (nested)

                            col-4

### Responsive Layout grid

Responsive Layout grid is based on 12 columns and 6 breakpoints which define media queries. We use 'mobile first' approach which assumes 'min-width' as a parameter for calculation. To make it work, add a class for particular breakpoint on grid__item div block.

Example class: `grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1`

Available breakpoints:

name | value
--- | ---
xsmall | ≥ 0
small | ≥ 640px
medium | ≥ 960px
large | ≥ 1024px
xlarge | ≥ 1200px
xxlarge | ≥ 1440px

Example Markup
xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4
xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4
xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4

                            xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4
                            xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4
                            xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4

#### Responsive Layout grid - boxed

Boxed version is different as it has margin set between grid items, instead of padding (which is 0, by default).

Add `grid--boxed` modifier class to the main grid block.

Example Markup
xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4
xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4
xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4

                            xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4
                            xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4
                            xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4

#### Responsive Layout grid - boxed styled

Styled boxed version is just with added background white and box shadow to grid items.

To achieve this, grid block should have the class: `grid grid--boxed grid--boxed-styled`

Example Markup
xsmall-12 small-3 medium-4 large-2 xlarge-3 xxlarge-4
xsmall-12 small-6 medium-8 large-8 xlarge-3 xxlarge-4
xsmall-12 small-3 medium-4 large-2 xlarge-6 xxlarge-4

                            xsmall-12 small-3 medium-4 large-2 xlarge-3 xxlarge-4
                            xsmall-12 small-6 medium-8 large-8 xlarge-3 xxlarge-4
                            xsmall-12 small-3 medium-4 large-2 xlarge-6 xxlarge-4

More examples on the playground page.