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

<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

<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

<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