Auto Spacing
Utilities for controlling the space between child elements.
Classes
The Stack and Flow layouts work by using the adjacent sibling combinator (+) to apply a top or left margin to sibling elements. This means it will only work when there are more than two sibling items. To allow for differing nesting spacing values, these margins are scoped to apply only to direct children of the parent (e.g. .d-stack[#] > * + *).
| Value | Vertical Class | Horizontal Class |
|---|---|---|
| 0px | .d-stack0 | .d-flow0 |
| 1px | .d-stack1 | .d-flow1 |
| 2px | .d-stack2 | .d-flow2 |
| 4px | .d-stack4 | .d-flow4 |
| 6px | .d-stack6 | .d-flow6 |
| 8px | .d-stack8 | .d-flow8 |
| 12px | .d-stack12 | .d-flow12 |
| 16px | .d-stack16 | .d-flow16 |
| 24px | .d-stack24 | .d-flow24 |
| 32px | .d-stack32 | .d-flow32 |
| 48px | .d-stack48 | .d-flow48 |
| 64px | .d-stack64 | .d-flow64 |
| 72px | .d-stack72 | .d-flow72 |
| 84px | .d-stack84 | .d-flow84 |
| 96px | .d-stack96 | .d-flow96 |
| 102px | .d-stack102 | .d-flow102 |
| 114px | .d-stack114 | .d-flow114 |
| 128px | .d-stack128 | .d-flow128 |
Adding space vertically
<div class="d-stack16">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Adding space horizontally
<div class="d-flow24">
<div>1</div>
<div>2</div>
<div>3</div>
</div>