Grid
Grid Wrapper
Grids are enclosed in a wrapper that contains the grid's individual columns and determines the offset between single columns.
<div class="grid"></div>
Gutters
The grid gutter determines whether the content columns of a grid should take up all of the available space, or be separated by horizontal and/or vertical white space.
The syntax for gutter classes is .gutter-<side>-<size>
(analogous to Spacings).
<div class="grid"></div>
<div class="grid gutter-s"></div>
<div class="grid gutter-horizontal-m"></div>
<div class="grid gutter-vertical-l"></div>
Grid Items
Grid items are the elements that form a grid's individual content columns.
<div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> </div>
Sizes
You can use the global width classes to split your grid columns into fractions of two, three, four, five, six, eight, ten, and twelve.
Please see the Widths section for a full explanation.
<div class="grid"> <div class="grid-item one-third"> </div> <div class="grid-item one-third"> </div> <div class="grid-item one-third"> </div> </div>
States
The responsive grid has three states:
-
palm
for palm-held devices like mobile phones, smart phones, small tablets, smart watches etc.; -
lap
for lap-held devices like larger tablets, iPads, netbooks; -
desk
for desk-top computers, laptops, and generally everything with a screen over 1024 pixels wide.
These states can be explicitly targeted to achieve different layouts for different devices.
<div class="grid"> <div class="grid-item palm-one-whole lap-one-half desk-one-third"> </div> <div class="grid-item palm-one-whole lap-one-half desk-one-third"> </div> <div class="grid-item palm-one-whole lap-one-whole desk-one-third"> </div> </div>
Please see Widths for a full explanation.
Nesting grids
Grids can be infinitely nested inside each other. You can also mix and match grids with and without gutters, you can change
the amount of items in each grid, and so forth. Just keep in mind to wrap each grid in its own grid-item
.
<div class="grid gutter-m"> <div class="grid-item two-thirds"> Column 1 <div class="grid gutter-s"> <div class="grid-item one-half"> Column 1.1 </div> <div class="grid-item one-half"> Column 1.2 <div class="grid gutter-xs"> <div class="grid-item one-half"> Column 1.2.1 </div> <div class="grid-item one-half"> Column 1.2.2 </div> </div> </div> </div> </div> <div class="grid-item one-third"> Column 2 </div> </div>
Pushing
Grid items can be pushed to the right to align elements or to create whitespace. You can do this by using the “push” classes.
Push classes follow the syntax .<state>-push-<width-class>
, where “state” is one of the usual state
prefixes, i.e. “palm”, “lap”, or “desk”, and “width-class” is one of the width classes
mentioned above.
For example: .palm-push-two-thirds
will push a grid item to the right by two thirds, but only on palm-sized devices.
<div class="grid gutter-xs"> <div class="grid-item two-thirds"></div> <div class="grid-item one-third"></div> <div class="grid-item one-third"></div> <div class="grid-item one-third push-one-third"></div> </div>