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

Adding space horizontally