EZPZ Flexbox Grid

Optional features

This page contains examples of the grid features that are disabled by default to reduce CSS footprint.

1: Cell order

The order of cells in a grid section can be altered by adding a cell--order-{#} class to the cells. In the example below the HTML elements exist in alphabetical order, but the classes re-order them without altering the HTML order.

The .cell--order-start and .cell--order-end classes will move the cell to the start/end of the grid section.

If two cells have the same position they will be placed according to their order in the DOM.

1
2
3
4

2: Horizontal cell offset

Cells within a grid section can be offset horizontally to create a gap between that specific cell and the previous cell in the section. All cells will automatically take up an equal amount of the remaining space in the section.

Cells can be offset by adding a .cell--offset-{fraction} class to a .cell element. The second cell in the example has been offset by quarter of the width of the grid element.

1
2
3

3: Alignment of all cells within a grid section

By default all cells within a grid section will stretch vertically to ensure they all have the same height as the tallest cell in the section.

3.1: Align start

By adding a .grid--align-start class to the .grid element the default stretching behaviour will be overwritten and cells will each have their own height/width and align to the start of the grid element.

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

3.2: Align end

By adding a .grid--align-end class to the .grid element the default stretching behaviour will be overwritten and cells will each have their own height/width and align to the end of the grid element.

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

3.3: Align center

By adding a .grid--align-center class to the .grid element the default stretching behaviour will be overwritten and cells will each have their own height/width and align in the center of the grid element.

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

3.4: Align stretch

In cases where stretch is not the default alignment behaviour for the grid, equal heights for all the .cell elements within the grid section can be regained by adding a .grid--align-stretch class to the .grid element.

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

3.5: Align baseline

By adding a .grid--align-baseline class to the .grid element the default stretching behaviour will be overwritten and cells will each align based on the baseline of the content within the .cell element.

1

2

3

4: Alignment of individual cells

Sometimes changing the alignment of all cells within a grid section is overkill and aligning a specific cell might be preferable. In this case a .cell--align-start, .cell--align-end, .cell--align-center, .cell--align-stretch or .cell--align-baseline class can be applied to a .cell element.

This will only alter the alignment of the specific cells. All cells without an alignment class will stretch and have the same height/width as other cells in the grid section.

Please note that the .cell--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
4a

5: Collapsed gutters

It can be beneficial to have a grid section with one or more cells that do not have a gutter.

5.1: For all cells within a grid section

The gutters for all cells within a grid section can be disabled by adding the .grid--collapsed class to the .grid element.

1
2
3
4

5.2: For specific cells

Sometimes it might be preferable to disable the gutters of a specific cell instead of all cells. This can be achieved by adding the .cell--collapsed class to a .cell element.

Please note that this ONLY WORKS when combined with a specific .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

6: Wrapping cells

Cells within a grid section can be forced to wrap to a new or previous line when there is not enough space to house all the content. Wrapping cells will take up an equal amount of horizontal space per line, unless defined otherwise.

6.1: Default wrapping

By adding the .grid--wrap class to a .grid element the cells will automatically wrap to the next line once there is not enough space to house them.

Please resize your browser to a small width to see this effect.

1
2
3
4
5
6
7
8
9
10
11
12

6.2: Reversed wrapping

By adding the .grid--wrap-reverse class to a .grid element the cells will automatically wrap to the previous line once there is not enough space to house them.

Please resize your browser to a small width to see this effect.

1
2
3
4
5
6
7
8
9
10
11
12