Align items

Use pam-Grid-Control="align:[start|center|end|basline|stretch]" to align grid items along the cross axis on the current line.

Top
Center
End
Stretch
Markup

Toggle example guides Toggle HTML markup 

<div pam-Grid>
    <div pam-Unit="1-4" pam-skin="lighter">
        <div pam-Grid pam-Grid-Control="align:start" sg-Height="150">
            <div pam-Unit="1-1">
                <div pam-Unit-Test="stretch">Top</div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-4" pam-skin="light">
        <div pam-Grid pam-Grid-Control="align:center" sg-Height="150">
            <div pam-Unit="1-1">
                <div pam-Unit-Test="stretch">Center</div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-4" pam-skin="lighter">
        <div pam-Grid pam-Grid-Control="align:end" sg-Height="150">
            <div pam-Unit="1-1">
                <div pam-Unit-Test="stretch">End</div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-4">
        <div pam-Grid pam-Grid-Control="align:stretch" sg-Height="150">
            <div pam-Unit="1-1">
                <div pam-Unit-Test="stretch">Stretch</div>
            </div>
        </div>
    </div>
</div>