This design system is based on a 14-column grid and uses viewport width (vw) measurements to measure these columns.
For example: one column = 7.14vw. To get that number, you divide 100 (the full width of the viewport) by 14 (number of columns).

Columns

Width - 1 Col

Width - 2 Col

Width - 3 Col

Flexbox

Display Flex Horizontal Start

Display Flex - Horizontal Start

Display Flex Horizontal Center

Display Flex - Horizontal Start

Display Flex Horizontal End

Display Flex - Horizontal Start

Display Flex Horizontal Stretch

Display Flex - Horizontal Start

Display Flex Vertical Start

Display Flex - Horizontal Start

Display Flex Vertical End

Display Flex - Horizontal Start

Display Flex Vertical Center

Display Flex - Horizontal Start

Display Flex Vertical Stretch

Display Flex - Horizontal Start

Flexbox Combo Classes

Display Flex Horizontal Start

Justify Space Between

Display Flex - Horizontal Start

Display Flex Horizontal Start

Justify End

Display Flex - Horizontal Start

Grid

1-Up Grid - 10px Gap

1-Up Grid - 10px Gap

2-Up Grid - 1:1 .5 Col Gap

1-Up Grid - 10px Gap

2-Up Grid - 1:1 1 Col Gap

1-Up Grid - 10px Gap

2-Up Grid - 1:1 No Gap

1-Up Grid - 10px Gap

2-Up Grid - 2:1 .5 Col Gap

1-Up Grid - 10px Gap

2-Up Grid - 2:1 1 Col Gap

1-Up Grid - 10px Gap

3-Up Grid - 1:1 .5 Col Gap

1-Up Grid - 10px Gap

1-Up Grid - 10px Gap