Grid: Simple Examples

By default, columns expand and wrap as needed based on their content.

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12 
<div class="grid">
    <div class="grid-col grid-col--xs-1">
        Col 1
    </div>
    [...]
    <div class="grid-col grid-col--xs-1">
        Col 12
    </div>
</div>

Reverse Grid

The columns inside a grid can be reversed using the "grid--reverse" class.

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12 
<div class="grid grid--reverse">
    <div class="grid-col grid-col--xs-1">
        Col 1
    </div>
    [...]
    <div class="grid-col grid-col--xs-1">
        Col 12
    </div>
</div>

Compact Grid

A grid's gutters can be removed using the "grid--compact" class.

Col 1
Col 2
Col 3
Col 4
Col 5
Col 6
Col 7
Col 8
Col 9
Col 10
Col 11
Col 12 
<div class="grid grid--compact">
    <div class="grid-col grid-col--xs-1">
        Col 1
    </div>
    [...]
    <div class="grid-col grid-col--xs-1">
        Col 12
    </div>
</div>