Grid

Grid

The grid uses the Flex Grid from Foundation 6.

The markup looks like this:

<div class="row">
    <div class="columns small-12">...</div>
    <div class="columns small-12">...</div>
</div>

To offset columns, use the .*-offset-* class:

<div class="row">
    <div class="columns small-12 large-6 large-offset-6">...</div>
</div>
<div class="row show-grid">
    <div class="columns small-12 medium-expand">12</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-11">11</div>
    <div class="columns small-12 medium-1">1</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-10">10</div>
    <div class="columns small-12 medium-2">2</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-9">9</div>
    <div class="columns small-12 medium-3">3</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-8">8</div>
    <div class="columns small-12 medium-4">4</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-7">7</div>
    <div class="columns small-12 medium-5">5</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 medium-6">6</div>
    <div class="columns small-12 medium-6">6</div>
</div>

<div class="row show-grid">
    <div class="columns small-4">4</div>
    <div class="columns small-4">4</div>
    <div class="columns small-4">4</div>
</div>

<div class="row show-grid">
    <div class="columns small-3">3</div>
    <div class="columns small-3">3</div>
    <div class="columns small-3">3</div>
    <div class="columns small-3">3</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 large-6 large-offset-6">6</div>
</div>

<div class="row show-grid">
    <div class="columns small-12 large-6 large-offset-3">6</div>
</div>
/* No context defined for this component. */