Layout
Breakpoint
| Breakpoint | Range | Max Column | Gutter | Margin |
|---|---|---|---|---|
| Extra Small | 320 - 480 | 2 | 16 | 16 |
| Small | 481 - 768 | 4 | 16 | 16 |
| Medium | 769 - 1199 | 8 | 24 | 32 |
| Large | >= 1200 | 12 | 24 | 64 |
Column
This is where the content aligns to. Column sizes change based on the size of their container. Using 12-grid for website and 4-grid for mobile
Column 1: Column on Web
Column 2: Column on Mobile
Gutter
The fixed space between columns. This space remains the same even if the container size changes.
Gutter 1: Gutter on Web
Gutter 2: Gutter on Mobile
Margin
Space between the outer columns and its container. This space remains the same even if the container size changes.
Margin 1: Margin on Web
Margin 2: Margin on Mobile
Content
Align content to the columns on the grid. Any cells that do not fit on a single row will wrap to a new row.
Content 1: Content on Web
Content 2: Content on Mobile
Span
Align content to the columns on the grid. Any cells that do not fit on a single row will wrap to a new row.
Span 1: Span on Web
Span 2: Span on Mobile