Grid: Horizontal Arrangement

A grid's children can be horizontally aligned within the grid. The same grid can have different alignments at different breakpoints.

Example #1

Medium - Align to center of grid
Extra Large - Align to end of grid 
<div class="grid grid--md-center grid--xl-end">
    <div class="grid-col grid-col--xs-9">
        [...]
    </div>
</div>

Column spacing (space-around)

Equal spacing is added on either side of each grid child.

Col 1
Col 2
Col 3 
<div class="grid grid--xs-around">
    <div class="grid-col grid-col--xs-3">
        Col 1
    </div>
    <div class="grid-col grid-col--xs-3">
        Col 2
    </div>
    <div class="grid-col grid-col--xs-3">
        Col 3
    </div>
</div>

Column spacing (space-between)

Equal spacing is added between each grid child.

Col 1
Col 2
Col 3 
<div class="grid grid--xs-between">
    <div class="grid-col grid-col--xs-3">
        Col 1
    </div>
    <div class="grid-col grid-col--xs-3">
        Col 2
    </div>
    <div class="grid-col grid-col--xs-3">
        Col 3
    </div>
</div>