Grid

Our template uses a 16-column version of the Foundation framework5. More information on the Foundation grid can be found on Zurb's website.

Start by adding a div element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a columns class within that row. Specify the widths of each column with the small-#, medium-#, and large-# classes, with # ranging from 1-16.

The template is mobile-first, so larger screens will inherit small styles, but not the other way around. For example, a column with the class small-3 will still occupy 3 columns at the large screen size, even if the column had no additional classes. On the other hand, if a column has only a large-3 class, the element will expand to the full width of the row at smaller screen sizes, instead of occupying 3 columns. See the examples below for reference.

HTML

<div class="row">
    <div class="large-8 columns">...</div>
    <div class="large-8 columns">...</div>
</div>
<div class="row">
    <div class="large-8 small-12 columns">...</div>
    <div class="large-8 small-4 columns">...</div>
</div>
<div class="row">
    <div class="large-10 medium-6 small-5 columns">...</div>
    <div class="large-3 medium-4 small-5 columns">...</div>
    <div class="large-3 medium-6 small-6 columns">...</div>
</div>

Rendered HTML

Advanced Use

Grids can be nested indefinitely by simply including a new row inside an existing column. Nested columns will use the width of their parent column as their maximum-possible width.

HTML

<div class="row">
    <div class="small-12 columns">12
        <div class="row">
            <div class="small-12 columns">12 Nested
                <div class="row">
                    <div class="small-12 columns">12 Nested Again</div>
                    <div class="small-4 columns">4</div>
                </div>
            </div>
            <div class="small-4 columns">4</div>
        </div>
    </div>
    <div class="small-4 columns">4</div>
</div>

Rendered HTML