EZPZ Flexbox Grid

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.

1
2
3
4

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.

1
2

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.

1
2
3
4

4: Changing cell offset

A cell can be offset by adding a .cell--{breakpoint}-offset-{fraction} class to a .cell element.

1
2
3

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

1a
2a
3a
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.

1a
1b
1c
2a
3a
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.

1
2
3
4

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.

1
2
3
4

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.

1
2

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.

1a
1b
1c
2a
3a
3b
4a

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.

1a
1b
1c
2a
3a
3b
4a