Spacing

Use pam-Grid-Control="space[-x|-y]:[large|small]" to control the spacing of the grid.

Modifier(s):

  • space: Add spacing to both x and y.
  • space-x: Add spacing to x.
  • space-y: Add spacing to y.

Variable(s):

  • @grid-spacing: Default grid spacing size (default: 8px).
  • @grid-spacing-large: Large grid spacing (default: 16px).
  • @grid-spacing-small: Small grid spacing (default: 4px).
Space
Space
Space
Space
Space X
Space X
Space Y
Space Y
Markup

Toggle example guides Toggle HTML markup 

<div pam-Grid>
    <div pam-Unit="1-1">
        <div pam-Unit-Test>
            <div pam-Grid pam-Grid-Control="space">
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space</div>
                </div>
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space</div>
                </div>
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space</div>
                </div>
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space</div>
                </div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-1">
        <div pam-Unit-Test>
            <div pam-Grid pam-Grid-Control="space-x">
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space X</div>
                </div>
                <div pam-Unit="1-2">
                    <div pam-Unit-Test>Space X</div>
                </div>
            </div>
        </div>
    </div>
    <div pam-Unit="1-1">
        <div pam-Unit-Test>
            <div pam-Grid pam-Grid-Control="space-y">
                <div pam-Unit="1-1">
                    <div pam-Unit-Test>Space Y</div>
                </div>
                <div pam-Unit="1-1">
                    <div pam-Unit-Test>Space Y</div>
                </div>
            </div>
        </div>
    </div>
</div>