Grid
The grid helps you layout your page in an ordered and easy way.
Container
The container allows you to center your page content. The container is set to ~70% of the window width.
Try the button below to see what the page looks like without containers.
Columns
12 Columns
Our standard grid has 12 columns.
1
2
3
4
5
6
7
8
9
10
11
12
Offsets
12 columns
 
6 columns (offset by 6 columns)
Getting Responsive
smartphoneOn a small screen,
every component defaults to 12 columns (full width). This can be overridden by setting a "s1" to "s12" in the "Column CSS Classes" attribute.
laptopOn a medium screen,
use the default APEX "Column" and "Column Span" properties. This is a choice we've made for better responsive flexibility.
desktop_windowsOn a large screen,
you can set "l1" to "l12" in the "Column CSS Classes" attribute of any element.
Simple Example
Always 12 columns
Small 12, Medium 6
Advanced Example
s12 m12 l12
s12 m6 l3
s12 m6 l3
s12 m4 l3
s12 m4 l6
s12 m4 l3