Common Layouts - Auto Responsive
This is an auto-responsive grid system where including classes like "full-span", "one-half", "split-8" on a container causes that item to be automatically laid out. So a "one-half" element would expect there to be two of them - and they would span 50% each of their container. As that container shrinks they will eventually stack on their own.
Full Width
Half (50/50 Split)
8 and 4 Split
9 and 3 Split
One Third
One Quarter
one-fourth
one-fourth
one-fourth
one-fourth
One Sixth
one-sixth
one-sixth
one-sixth
one-sixth
one-sixth
one-sixth
One Column
Written with class "single-column"
1
2
3
4
5
6
7
8
9
10
11
12
Shifting
8 columns of 12 - Shifted 2 Columns
Manual Layouts - Manual responsive behavior
In these layouts you tell each container specifically what size to be. So you could say span_12 which spans (12 columns of a 12 column grid), or you could do span_6 and span_6 last to lay two items next to each other with 50% width each. span_12 down to span_1 will work.
Full Width
9 Columns
6 Columns
Nested Layouts
8 of 12
4 of 8
2 of 4
2 of 4
4 of 8
4 of 12