Grid
Flex-grid
.flex-grid__cell
.flex-grid__cell
.flex-grid__cell
--1ofX width modifier
.flex-grid__cell .flex-grid__cell--1of2
.flex-grid__cell
.flex-grid__cell
.flex-grid__cell .flex-grid__cell--1of3
.flex-grid__cell
.flex-grid__cell--1of4
.flex-grid__cell
.flex-grid__cell--1of5
.flex-grid__cell
.flex-grid__cell
.flex-grid__cell--2of5
.flex-grid__cell
.flex-grid__cell--1of6
.flex-grid__cell
.flex-grid__cell
--1of12
.flex-grid__cell
.flex-grid__cell
--1of16
.flex-grid__cell
.flex-grid__cell
--1of20
.flex-grid__cell
.flex-grid__cell
Flex-grid with gutters
.flex-grid--w-gutters .flex-grid__cell
.flex-grid__cell .flex-grid__cell--1of2
.flex-grid__cell
.flex-grid--w-gutters .flex-grid__cell
.flex-grid__cell
.flex-grid__cell
Flex grid alignment
.flex-grid__cell .flex-grid__cell--v-center
.flex-grid__cell
.flex-grid__cell .flex-grid__cell--v-top
.flex-grid__cell
.flex-grid__cell .flex-grid__cell--v-bottom
.flex-grid__cell
--reverse-on-mobile modifier
On desktop: Blue rendered first
On mobile: Blue rendered second
On mobile: Red rendered first
On desktop: Red rendered second