Utilities for controlling the space between child elements.
<div class="d-bgc-bold d-stack16 d-bar-400 lg:d-w-150 d-w-200"> <div class="d-p-200 d-bar-400 d-bgc-moderate d-ta-center">1</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-ta-center">2</div> <div class="d-p-200 d-bar-400 d-bgc-moderate d-ta-center">3</div> </div>
<div class="d-fl-center d-bgc-bold d-flow24 d-bar-400 d-ta-center"> <div class="lg:d-w-150 d-w-200 d-p-200 d-bar-400 d-bgc-moderate">1</div> <div class="lg:d-w-150 d-w-200 d-p-200 d-bar-400 d-bgc-moderate">2</div> <div class="lg:d-w-150 d-w-200 d-p-200 d-bar-400 d-bgc-moderate">3</div> </div>
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 |
| 20px | .d-stack20 | .d-flow20 |
| 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 |
Auto Spacing documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope