Grid

<div class="g m-b300">
    <div class="g--12">12 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--9">9 Columns</div>
    <div class="g--3">3 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--8">8 Columns</div>
    <div class="g--4">4 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--7">7 Columns</div>
    <div class="g--5">5 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--6">6 Columns</div>
    <div class="g--6">6 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--4">4 Columns</div>
    <div class="g--4">4 Columns</div>
    <div class="g--4">4 Columns</div>
</div>

<div class="g m-b300">
    <div class="g--3">3 Columns</div>
    <div class="g--3">3 Columns</div>
    <div class="g--3">3 Columns</div>
    <div class="g--3">3 Columns</div>
</div>
<div class="g m-b300">
  <div class="g--12">12 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--9">9 Columns</div>
  <div class="g--3">3 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--8">8 Columns</div>
  <div class="g--4">4 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--7">7 Columns</div>
  <div class="g--5">5 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--6">6 Columns</div>
  <div class="g--6">6 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--4">4 Columns</div>
  <div class="g--4">4 Columns</div>
  <div class="g--4">4 Columns</div>
</div>

<div class="g m-b300">
  <div class="g--3">3 Columns</div>
  <div class="g--3">3 Columns</div>
  <div class="g--3">3 Columns</div>
  <div class="g--3">3 Columns</div>
</div>
/* No context defined for this component. */

The Grid

Crispus relies on a 12 column grid. The grid is built using flexbox with a fallback to floats for IE9. Every set of columns should be wrapped in an element with the g class. This wrapper should also include any necessary vertical margin classes.