Columns

The column suite is the primary layout tool in the framework. Columns will max out at 1920px.

There are two sets, one based on percentages & the other based on Viewport Width units. The percentage set is ideal for repeated columns, such as a 3up component, & pairs nicely with the Margin Offset classes. (VW-based columns will be thrown off by the negative margins.) The VW set is ideal for asymmetric layouts, like an 8 Col column of text & a 4 Col column photo, or centering a 4 Col column of text on the page with the Center Element class.

Tip: Because the browser scrollbar can cause 20px of horizontal scroll when using 100vw, it's important to use Auto Col, Auto Col Tab, or Auto Col Mob for the last column when using the VW set..

Column
Fifth
Column
Fourth
Column
Third
Column
Half
Column
Whole
Column
Fifth Tab
Column
Fourth Tab
Column
Third Tab
Column
Half Tab
Column
Whole Tab
Column
Fifth Mob
Column
Fourth Mob
Column
Third Mob
Column
Half Mob
Column
Whole Mob
Column
Auto Col
Column
1 Col
Column
2 Col
Column
3 Col
Column
4 Col
Column
5 Col
Column
6 Col
Column
7 Col
Column
8 Col
Column
9 Col
Column
10 Col
Column
11 Col
Column
12 Col
Column
13 Col
Column
14 Col
Column
Auto Col Tab
Column
1 Col Tab
Column
2 Col Tab
Column
3 Col Tab
Column
4 Col Tab
Column
5 Col Tab
Column
6 Col Tab
Column
7 Col Tab
Column
8 Col Tab
Column
9 Col Tab
Column
10 Col Tab
Column
11 Col Tab
Column
12 Col Tab
Column
13 Col Tab
Column
14 Col Tab
Column
1 Col Mob
Column
2 Col Mob
Column
3 Col Mob
Column
4 Col Mob
Column
5 Col Mob
Column
6 Col Mob
Column
7 Col Mob
Column
8 Col Mob
Column
9 Col Mob
Column
10 Col Mob
Column
11 Col Mob
Column
12 Col Mob
Column
13 Col Mob
Column
14 Col Mob