Adaptive

pam-Unit="1-1 small:1-2 large:1-4" Creates a adaptive grid. On small devices it will have width: 100%, then it will shrink to width: 50% on small-sized screens and shrink to 25% on large-sized screens and above.

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

Toggle example guides Toggle HTML markup 

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