Grid System
Grid system
Powerful mobile-first flexbox grid.
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px | |
---|---|---|---|---|---|
Max container width | None (auto) | 540px | 720px | 960px | 1140px |
Class prefix | .ColumnSize.Is{n} |
.ColumnSize.Is{n}.OnTablet |
.ColumnSize.Is{n}.OnDesktop |
.ColumnSize.Is{n}.OnWidescreen |
.ColumnSize.Is{n}.OnFullHD |
# of columns | 12 | ||||
Gutter width | 24px (12px on each side of a column) | ||||
Custom gutters | Yes | ||||
Nestable | Yes | ||||
Column ordering | Yes |
Examples
.Is12.OnDesktop
.Is6.OnDesktop
.Is6.OnDesktop
.Is4.OnDesktop
.Is4.OnDesktop
.Is4.OnDesktop
.Is3.OnDesktop
.Is3.OnDesktop
.Is3.OnDesktop
.Is3.OnDesktop
.Is2.OnDesktop
.Is2.OnDesktop
.Is2.OnDesktop
.Is2.OnDesktop
.Is2.OnDesktop
.Is2.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is1.OnDesktop
.Is8.OnDesktop
.Is4.OnDesktop
.Is3.OnDesktop
.Is6.OnDesktop
.Is3.OnDesktop