Gird

 

Base

6 cells
2 cells
4 cells
<div class="grid">
  <div class="cell cell--6">6 cells</div>
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--4">4 cells</div>
</div>

Responsive

12/12/6 cells
12/4/2 cells
12/8/4 cells
<div class="grid">
  <div class="cell cell--12 cell--lg-6  content">12/12/6 cells</div>
  <div class="cell cell--12 cell--md-4 cell--lg-2 content">12/4/2 cells</div>
  <div class="cell cell--12 cell--md-8 cell--lg-4 content">12/8/4 cells</div>
</div>

Auto Sizing

2 cells
Whatever's left!
<div class="grid">
  <div class="cell cell--2">2 cells</div>
  <div class="cell cell--auto">whatever's left!</div>
</div>
shrink
expand
<div class="grid">
  <div class="cell cell--shrink">shrink</div>
  <div class="cell cell--auto">expand</div>
</div>

Gutters

6 cells
6 cells
6 cells
6 cells
<div class="grid-container">
  <div class="grid grid--p-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>
6 cells
6 cells
6 cells
6 cells
<div class="grid-container">
  <div class="grid grid--px-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>
6 cells
6 cells
6 cells
6 cells
<div class="grid-container">
  <div class="grid grid--py-3">
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
    <div class="cell cell--6"><div>6 cells</div></div>
  </div>
</div>

Overflow

loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong