Sizing
Relative to parent
Width
Width 25%
Width 50%
Width 75%
Width 100%
Height
Height 25%
Height 50%
Height 75%
Height 100%
Max width and height
Max-width

Max-height

Relative to viewport
Width

Min-width

Height

Min-height

Column classes
Parent element must be a block-level element (display: block;
)
All breakpoints
Width 1/12
Width 1/6
Width 1/4
Width 1/3
Width 5/12
Width 1/2
Width 7/12
Width 2/3
Width 3/4
Width 5/6
Width 11/12
Width 1/1
Responsive
Example: XS: 1/6, SM: 1/3, MD: 1/2, LG: 2/3, XL: 5/6, XXL: 1/1
Example