Columns

Notes: The following columns utilize Flexbox. There are numerous Flexbox generators (e.g., https://www.cssportal.com/css-flexbox-generator/) and resources (e.g., A Complete Guide to Flexbox) available to aid in the customization of columns.

Associated Files: styles.css

Column Widths

Append .group to the outer element and .group_XofX to the inner element(s).

1of2

1of3

2of3

1of4

3of4

1of5

4of5

2of5

3of5

1of6

5of6

1of7

6of7

2of7

5of7

3of7

4of7

1of8

7of8

3of8

5of8

Reordering

For .first and .last, append the class to .group_XofX to reorder the contents of the row. For .reverse, append the class to .group to reorder the contents of the row.

.first

.last

.reverse

Alignment

Append the class to .group to align the contents of the row.

.start

1of3

.center

1of3

.end

1of3

.top

1of3

.middle

1of3

.bottom

1of3

Distribution

Append the class to .group to distribute the contents of the row.

.around

1of5

.between

1of5