Grid System

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.

One Third

One Quarter

One Sixth

One Column

Written with class "single-column"

Shifting

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