Grid

Grid Wrapper

Grids are enclosed in a wrapper that contains the grid's individual columns and determines the offset (gutters) between single columns.

<div class="grid"></div>

Note: Be sure to apply no custom styling to a grid container or its grid items. While this may work in some cases, it will, more likely than not, result in broken layouts due to the way that the grid items are being positioned beneath the hood. Use wrappers or children instead for borders, backgrounds, paddings, etc.

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"></div>

<div class="grid gutter-s"></div>

<div class="grid gutter-horizontal-xl"></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>

Responsive Grids

The responsive grid has three states:

1. palm for palm-held devices like mobile phones, smart phones, small tablets, smart watches etc.;
2. lap for lap-held devices like larger tablets, iPads, netbooks;
3. 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>