Grid

One plus two

Description.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
<div class="grid--one-two">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>

Three

Goes from one grid__item on small screens to three grid__item's on larger screens.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--three">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Three no gutter

Similar to three column grid, but without gutter and space on all sizes except really small displays.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--three--nogutter">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Tile grid

Special grid for three tiles on one row.

Tile one
Tile two
Tile three 
<div class="container grid-tile">
  <div class="section__main tile-wrapper">
    <article class="tile green grid__item">
      Tile one
    </article>
    <article class="tile green grid__item">
      Tile two
    </article>
    <article class="tile green grid__item">
      Tile three
    </article>
  </div>
</div>

Two

Two column grid that breaks down to one column on smaller sceens

Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
<div class="grid--two">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Two plus one

Description.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
<div class="grid--two-one">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>