Use with:
Grid Columns
Use these utilities exclusively with the grid object to provide width for layouts.
1
2
3
4
5
6
7
8
9
10
11
12
Responsive Columns
By applying a responsive suffix to a column utility class, columns will respond at that particular "breakpoint". Available breakpoints are --bp1, --bp2, --bp3, --bp4, --bp5.
4 @bp2
6 @bp3
8 @bp4
10 @bp5
12 ~
% Widths
Apply a percentage based width to any element.
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Fixed Widths
Apply a static width to any element. Especially helpful for flexbox based layouts.
5 rem
10 rem
15 rem
20 rem
25 rem
30 rem
Mixing Fixed and Auto Widths
Mix fixed widths with auto widths to allow a left or right fixed layout.
10 Rem
Auto