Layout & Grid

Dividing up the page

Multicolumn layouts allow you to create relationships between content chunks and customize your story with words and images.

Use the breakout option to interrupt the normal grid and draw emphasis to a piece of content.

Grid layout

The grid column layout is best used for a series of content chunks. The layout is divided into two or three columns and takes the height of the tallest chunk in the row and extends the height of the other to match.

Grid thirds

33%
33%
33%
33%
33%
Show/hide markup
<div class="grid thirds">
    <div class="grid-item"><div class="column-demo">33%</div></div>
    <div class="grid-item"><div class="column-demo">33%</div></div>
    <div class="grid-item"><div class="column-demo">33%</div></div>
    <div class="grid-item"><div class="column-demo">33%</div></div>
    <div class="grid-item"><div class="column-demo">33%</div></div>
</div>

Grid halves

50%
50%
50%
50%
50%
Show/hide markup
<div class="grid halves">
    <div class="grid-item"><div class="column-demo">50%</div></div>
    <div class="grid-item"><div class="column-demo">50%</div></div>
    <div class="grid-item"><div class="column-demo">50%</div></div>
    <div class="grid-item"><div class="column-demo">50%</div></div>
    <div class="grid-item"><div class="column-demo">50%</div></div>
</div>