1: Overwriting defaults

To generate a functional grid out of the box, several default settings are used. Most of these defaults can be overwritten through the use of variables, most notably: wrapping behaviour, alignment and content stretching behaviour.

• The default grid wrapping can be changed from 'nowrap' to 'wrap' or 'reverse'
• The default cell alignment can be changed from 'stretch' to 'start', 'center', 'end' or 'baseline'
• The default stretching behaviour of cell content can be changed from 'unstretch' to 'stretch'

For a full list of all the default settings that can be overwritten please refer to the settings documentation.

2: Horizontal layout

The most basic form of the grid, each .cell element will take up an equal amount of horizontal space in the containing .grid element.

By default all .cell elements will maintain the same height as all other cells on the same row within a .grid element, similar to the way flexbox handles the height of flex-items. This behaviour can be changed through the use of the optional alignment classes.

3: Vertical layout

Cells within a .grid element can be vertically ordered by adding the .grid--vertical class.

Please note that .cell elements with specific sizes (for example ¼ of the screen width), will not occupy ¼ of the viewport height when using a vertical layout. Cells will merely be converted to rows that take up the height of it's child elements.

4: Nested grid sections

Grids can be nested by adding a new .grid element within a .cell element. The width of the parent cell will dictate the width of the grid. All other behaviour remains the same as in the basic setup.

5: Cells with specific sizes

By adding a .cell--{fraction} class to a .cell element a percentual width can be applied to the cell. A .cell--1/4 class means that the element will take up one quarter of the available space. An element with the .cell--1/2 class will take up half the available space etc.

By only applying a .cell-{fraction} to specific cells, a width can be set for these cells. The remaining cells will automatically divide the remaining space within the grid section equally.

6: Stretching cell content

By default all direct children of specific or multiple cells within a grid section can be forced to stretch so they take up the full width and height of the parent cell.