Grid: Align

<style>
    .row {
        background: #efefefe;
    }
    .example-content {
        background: pink;
        padding: 50px 0;
        border: 1px dashed hotpink;
        border-width: 0 1px;
        margin-bottom: 10px;
        text-align: center;
        font-weight: bold;
    }
</style>

<div>
    {{#switch type}}
        {{!-- Span --}}
        {{#case "span"}}
            <div class="row">
                {{#times 12}}
                    <div class="col col--span-12 col--span-xs-6 col--span-s-4 col--span-m-3 col--span-l-2 col--span-xl-1">
                        <div class="example-content"></div>
                    </div>
                {{/times}}
            </div>
        {{/case}}
        {{!-- Order --}}
        {{#case "order"}}
            <div class="row">
                <div class="col col--span-3 col--order-s-3 col--order-m-4">
                    <div class="example-content">1</div>
                </div>
                <div class="col col--span-3 col--order-s-1 col--order-m-3">
                    <div class="example-content">2</div>
                </div>
                <div class="col col--span-3 col--order-s-4 col--order-m-2">
                    <div class="example-content">3</div>
                </div>
                <div class="col col--span-3 col--order-s-2 col--order-m-1">
                    <div class="example-content">4</div>
                </div>
            </div>
        {{/case}}
        {{!-- Justify --}}
        {{#case "justify"}}
            {{#each modifiers}}
                <h1>{{this}}</h1>
                <div class="row row--justify-{{this}}">
                    <div class="col col--span-3">
                        <div class="example-content"></div>
                    </div>
                    <div class="col col--span-3">
                        <div class="example-content"></div>
                    </div>
                    <div class="col col--span-3">
                        <div class="example-content"></div>
                    </div>
                </div>
            {{/each}}
        {{/case}}
        {{!-- Align --}}
        {{#case "align"}}
            {{#each modifiers}}
                <h1>{{this}}</h1>
                <div class="row row--align-{{this}}">
                    <div class="col col--span-3">
                        <div class="example-content" style="padding: 100px 0;"></div>
                    </div>
                    <div class="col col--span-3">
                        <div class="example-content"></div>
                    </div>
                    <div class="col col--span-3">
                        <div class="example-content" style="padding: 100px 0;"></div>
                    </div>
                    <div class="col col--span-3">
                        <div class="example-content"></div>
                    </div>
                </div>
            {{/each}}
        {{/case}}
    {{/switch}}
</div>