Responsive features
This page contains examples of the responsive features of the grid. They are best shown by upsizing your browser, start with a mobile device width.
1: Changing the grid orientation
The orientation of the grid can be changed by adding .grid--{breakpoint}-vertical and .grid--{breakpoint}-horizontal classes to the .grid element.
2: Changing cell sizes
The size of specific cells can be altered from certain breakpoints and up by adding the .cell--{breakpoint}-{fraction} class to a .cell element.
3. Changing cell order
The order of cells within a grid section can be changed by adding a .cell--{breakpoint}-order-{#}, .cell--{breakpoint}-order-start or .cell--{breakpoint}-order-end class to a .cell element.
The amount of numerical order classes will match the amount of fractions that were chosen.
4: Changing cell offset
A cell can be offset by adding a .cell--{breakpoint}-offset-{fraction} class to a .cell element.
5: Changing cell alignment
The alignment of cells within a grid section can be changed in two ways. For all cells or for specific cells.
5.1: For all cells within a grid section
The alignment of all cells within a grid section can be changed by adding the .grid--{breakpoint}-align-start, .grid--{breakpoint}-align-end, .grid--{breakpoint}-align-center, .grid--{breakpoint}-align-stretch and .grid--{breakpoint}-align-baseline classes to the .grid element
2a
3a
3b
5.2: For specific cells
The alignment of specific cells within a grid section can be changed by adding the .cell--{breakpoint}-align-start, .cell--{breakpoint}-align-end, .cell--{breakpoint}-align-center, .cell--{breakpoint}-align-stretch and .cell--{breakpoint}-align-baseline classes to the .cell element
Please note that the .cell--{breakpoint}-align-baseline class has to be applied to at least two .cell elements within a .grid section for this property to have effect.
1b
1c
3b
6: Changing gutters
6.1: For all cells within a grid section
Gutters for all cells within a grid section can be collapsed or expanded by adding the .grid--{breakpoint]-collapsed and .grid--{breakpoint}-expanded classes to the .grid element.
6.2: For specific cells
Gutters for specific cells within a grid section can be collapsed or expanded by adding the .cell--{breakpoint]-collapsed and .cell--{breakpoint}-expanded classes to the .cell element.
Please note that this ONLY WORKS when combined with a specific .cell--{#} or .cell--{fraction} class. Otherwise the other cells will take up the newly freed up space created by the lack of gutters on the cell.
7: Changing wrapping
Wrapping functionality that has initialy been set to a .grid element can be disabled from a specific breakpoint by applying the .grid--{breakpoint}-nowrap class to the .grid element.
8: Changing content stretching behaviour
8.1: For all cells within a grid section
The stretching behaviour of the direct children of all the cells within a grid section can be changed by adding the .grid--{breakpoint}-content-stretch and .grid--{breakpoint}-content-unstretch classes to the .grid element.
1b
1c
3b
8.2: For specific cells
The stretching behaviour of the direct children of a specific cell be changed by adding the .cell--{breakpoint}-content-stretch and .cell--{breakpoint}-content-unstretch classes to the .cell element.
1b
1c
3b