The grid consists of twelve fluid columns at each breakpoint.
<div class="grid">
<div class="grid__unit" u-xs="cols:1"></div>
…
</div>
Grid units can span 2, 3 or 4 columns.
<div class="grid">
<div class="grid__unit" u-xs="cols:6">6</div>
<div class="grid__unit" u-xs="cols:6">6</div>
</div>
Grid units can span a different number of columns at each breakpoint.
<div class="grid">
<div class="grid__unit" u-xs="cols:12" u-sm="cols:6" u-md="cols:4" u-lg="cols:3"></div>
<div class="grid__unit" u-xs="cols:12" u-sm="cols:6" u-md="cols:4" u-lg="cols:3"></div>
<div class="grid__unit" u-xs="cols:12" u-sm="cols:6" u-md="cols:4" u-lg="cols:3"></div>
<div class="grid__unit" u-xs="cols:12" u-sm="cols:6" u-md="cols:4" u-lg="cols:3"></div>
</div>
(Flexbox only)
Grid units can be sized to take up no more room than their content, or sized to fill the remaining width of the grid.
<div class="grid">
<div class="grid__unit" u-xs="cols:2">2</div>
<div class="grid__unit" u-xs="cols:min">min</div>
<div class="grid__unit" u-xs="cols:max">max</div>
<div class="grid__unit" u-xs="cols:3">3</div>
</div>
Grid units can be hidden at any breakpoint.
<div class="grid">
<div class="grid__unit" u-sm="invisible">visible on mobile </div>
<div class="grid__unit" u-xs="invisible" u-sm="visible" u-lg="invisible">visible on tablet</div>
<div class="grid__unit" u-xs="invisible" u-lg="visible">visible on destop </div>
</div>
Grid units can be re-ordered.
<div class="grid">
<div class="grid__unit" u-xs="cols:2 order:last">A</div>
<div class="grid__unit" u-xs="cols:2">B</div>
<div class="grid__unit" u-xs="cols:2">C</div>
<div class="grid__unit" u-xs="cols:2">D</div>
<div class="grid__unit" u-xs="cols:2 order:first">E</div>
</div>
The grid units can be reversed.
<div class="grid" u-xs="order:reverse">
<div class="grid__unit" u-xs="cols:2">A</div>
<div class="grid__unit" u-xs="cols:2">B</div>
<div class="grid__unit" u-xs="cols:2">C</div>
<div class="grid__unit" u-xs="cols:2">D</div>
<div class="grid__unit" u-xs="cols:2">E</div>
</div>
Grids wrap to a new line by default when using cols:max on a grid unit that has more content than can fit. Set it to nowrap to prevent it.
<div class="grid" u-xs="wrap:nowrap">
<div class="grid__unit" u-xs="cols:min">A</div>
<div class="grid__unit" u-xs="cols:max">Scelerisque a suspendisse vestibulum mi ultrices vestibulum posuere tempus rutrum est ullamcorper sem parturient hac tristique a ac vestibulum libero vestibulum at. Enim suspendisse elit penatibus ad ullamcorper et eget molestie malesuada pharetra sed tincidunt litora amet praesent a commodo dignissim feugiat eu quis eleifend suspendisse.</div>
</div>
Wrapping can also be set to wrap.
<div class="grid" u-xs="wrap:wrap">
<div class="grid__unit" u-xs="cols:min">A</div>
<div class="grid__unit" u-xs="cols:max">Scelerisque a suspendisse vestibulum mi ultrices vestibulum posuere tempus rutrum est ullamcorper sem parturient hac tristique a ac vestibulum libero vestibulum at. Enim suspendisse elit penatibus ad ullamcorper et eget molestie malesuada pharetra sed tincidunt litora amet praesent a commodo dignissim feugiat eu quis eleifend suspendisse.</div>
</div>
And wrap-reverse.
<div class="grid" u-xs="wrap:wrap-reverse">
<div class="grid__unit" u-xs="cols:max">Scelerisque a suspendisse vestibulum mi ultrices vestibulum posuere tempus rutrum est ullamcorper sem ipsum dolor sit amet.</div>
<div class="grid__unit" u-xs="cols:max">Scelerisque a suspendisse vestibulum mi ultrices vestibulum posuere tempus rutrum est ullamcorper sem ipsum dolor sit amet.</div>
<div class="grid__unit" u-xs="cols:min">Lorem ipsum dolor sit amet.</div>
</div>
Horizontal.
<div class="grid" u-xs="halign:left">
...
</div>
<div class="grid" u-xs="halign:center">
...
</div>
<div class="grid" u-xs="halign:right">
...
</div>
<div class="grid" u-xs="halign:justify">
...
</div>
<div class="grid" u-xs="halign:justify-center">
...
</div>
(Flexbox only)
Vertical.
<div class="grid" u-xs="valign:top">
...
</div>
<div class="grid" u-xs="valign:middle">
...
</div>
<div class="grid" u-xs="valign:bottom">
...
</div>
<div class="grid" u-xs="valign:stretch">
...
</div>
Other elements can be hidden or displayed.
<div class="grid">
<div class="grid__unit">
<span u-xs="display:inline" u-md="display:none">mobile</span>
<span u-xs="display:none" u-md="display:inline" u-lg="display:none">tablet</span>
<span u-xs="display:none" u-lg="display:inline">desktop</span>
</div>
</div>
Text can be aligned differently at each breakpoint.
<div class="grid__unit" u-xs="text:left" u-md="text:center" u-lg="text:right">
...
</div>