Nested

As with the regular grid the adaptive grid can be nested. This example shows two units pam-Unit="1-1 medium:1-2" that each contain a adaptive grid.

1 ➝ 2
1 ➝ 2
3 ➝ 2
3 ➝ 4
3 ➝ 4
Markup

Toggle example guides Toggle HTML markup

<div pam-Grid>
    <div pam-Unit="1-1 medium:1-2">
        <div pam-Unit-Test>
            <div pam-Grid>
                <div pam-Unit="1-1 large:1-2">
                    <div pam-Unit-Test>1 &#10141; 2</div>
                </div>
                <div pam-Unit="1-1 large:1-2">
                    <div pam-Unit-Test>1 &#10141; 2</div>
                </div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-1 medium:1-2">
        <div pam-Unit-Test>
            <div pam-Grid>
                <div pam-Unit="1-3 large:1-2">
                    <div pam-Unit-Test>3 &#10141; 2</div>
                </div>
                <div pam-Unit="1-3 large:1-4">
                    <div pam-Unit-Test>3 &#10141; 4</div>
                </div>
                <div pam-Unit="1-3 large:1-4">
                    <div pam-Unit-Test>3 &#10141; 4</div>
                </div>
            </div>
        </div>
    </div>
</div>