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

<div class="g g--r">
    <div class="g--9 m-b300">1: 9 Columns</div>
    <div class="g--3 m-b300">2: 3 Columns</div>
</div>

<div class="g g--r">
    <div class="g--8 m-b300">1: 8 Columns</div>
    <div class="g--4 m-b300">2: 4 Columns</div>
</div>

<div class="g g--r">
    <div class="g--7 m-b300">1: 7 Columns</div>
    <div class="g--5 m-b300">2: 5 Columns</div>
</div>

<div class="g g--r">
    <div class="g--6 m-b300">1: 6 Columns</div>
    <div class="g--6 m-b300">2: 6 Columns</div>
</div>

<div class="g g--r">
    <div class="g--4 m-b300">1: 4 Columns</div>
    <div class="g--4 m-b300">2: 4 Columns</div>
    <div class="g--4 m-b300">3: 4 Columns</div>
</div>

<div class="g g--r">
    <div class="g--3 m-b300">1: 3 Columns</div>
    <div class="g--3 m-b300">2: 3 Columns</div>
    <div class="g--3 m-b300">3: 3 Columns</div>
    <div class="g--3 m-b300">4: 3 Columns</div>
</div>

The Grid

Fleet 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.

Reverse Grid example use case: You want a right-aligned button and left-aligned text. When shrinking down to mobile, though, you want the button above the text.