Gap

Flexbox & Grid

Utilities for controlling gutters between grid and flexbox items.

Class	Properties	Value
`ob-gap-0`	gap: var(--ob-size-0)	0px
`ob-gap-x-0`	column-gap: var(--ob-size-0)	0px
`ob-gap-y-0`	row-gap: var(--ob-size-0)	0px
`ob-gap-px`	gap: var(--ob-size-px)	1px
`ob-gap-x-px`	column-gap: var(--ob-size-px)	1px
`ob-gap-y-px`	row-gap: var(--ob-size-px)	1px
`ob-gap-0-5`	gap: var(--ob-size-0-5)	2px
`ob-gap-x-0-5`	column-gap: var(--ob-size-0-5)	2px
`ob-gap-y-0-5`	row-gap: var(--ob-size-0-5)	2px
`ob-gap-1`	gap: var(--ob-size-1)	4px
`ob-gap-x-1`	column-gap: var(--ob-size-1)	4px
`ob-gap-y-1`	row-gap: var(--ob-size-1)	4px
`ob-gap-1-5`	gap: var(--ob-size-1-5)	6px
`ob-gap-x-1-5`	column-gap: var(--ob-size-1-5)	6px
`ob-gap-y-1-5`	row-gap: var(--ob-size-1-5)	6px
`ob-gap-2`	gap: var(--ob-size-2)	8px
`ob-gap-x-2`	column-gap: var(--ob-size-2)	8px
`ob-gap-y-2`	row-gap: var(--ob-size-2)	8px
`ob-gap-2-5`	gap: var(--ob-size-2-5)	10px
`ob-gap-x-2-5`	column-gap: var(--ob-size-2-5)	10px
`ob-gap-y-2-5`	row-gap: var(--ob-size-2-5)	10px
`ob-gap-3`	gap: var(--ob-size-3)	12px
`ob-gap-x-3`	column-gap: var(--ob-size-3)	12px
`ob-gap-y-3`	row-gap: var(--ob-size-3)	12px
`ob-gap-3-5`	gap: var(--ob-size-3-5)	14px
`ob-gap-x-3-5`	column-gap: var(--ob-size-3-5)	14px
`ob-gap-y-3-5`	row-gap: var(--ob-size-3-5)	14px
`ob-gap-4`	gap: var(--ob-size-4)	16px
`ob-gap-x-4`	column-gap: var(--ob-size-4)	16px
`ob-gap-y-4`	row-gap: var(--ob-size-4)	16px
`ob-gap-5`	gap: var(--ob-size-5)	20px
`ob-gap-x-5`	column-gap: var(--ob-size-5)	20px
`ob-gap-y-5`	row-gap: var(--ob-size-5)	20px
`ob-gap-6`	gap: var(--ob-size-6)	24px
`ob-gap-x-6`	column-gap: var(--ob-size-6)	24px
`ob-gap-y-6`	row-gap: var(--ob-size-6)	24px
`ob-gap-7`	gap: var(--ob-size-7)	28px
`ob-gap-x-7`	column-gap: var(--ob-size-7)	28px
`ob-gap-y-7`	row-gap: var(--ob-size-7)	28px
`ob-gap-8`	gap: var(--ob-size-8)	32px
`ob-gap-x-8`	column-gap: var(--ob-size-8)	32px
`ob-gap-y-8`	row-gap: var(--ob-size-8)	32px
`ob-gap-9`	gap: var(--ob-size-9)	36px
`ob-gap-x-9`	column-gap: var(--ob-size-9)	36px
`ob-gap-y-9`	row-gap: var(--ob-size-9)	36px
`ob-gap-10`	gap: var(--ob-size-10)	40px
`ob-gap-x-10`	column-gap: var(--ob-size-10)	40px
`ob-gap-y-10`	row-gap: var(--ob-size-10)	40px
`ob-gap-11`	gap: var(--ob-size-11)	44px
`ob-gap-x-11`	column-gap: var(--ob-size-11)	44px
`ob-gap-y-11`	row-gap: var(--ob-size-11)	44px
`ob-gap-12`	gap: var(--ob-size-12)	48px
`ob-gap-x-12`	column-gap: var(--ob-size-12)	48px
`ob-gap-y-12`	row-gap: var(--ob-size-12)	48px
`ob-gap-14`	gap: var(--ob-size-14)	56px
`ob-gap-x-14`	column-gap: var(--ob-size-14)	56px
`ob-gap-y-14`	row-gap: var(--ob-size-14)	56px
`ob-gap-16`	gap: var(--ob-size-16)	64px
`ob-gap-x-16`	column-gap: var(--ob-size-16)	64px
`ob-gap-y-16`	row-gap: var(--ob-size-16)	64px
`ob-gap-20`	gap: var(--ob-size-20)	80px
`ob-gap-x-20`	column-gap: var(--ob-size-20)	80px
`ob-gap-y-20`	row-gap: var(--ob-size-20)	80px
`ob-gap-24`	gap: var(--ob-size-24)	96px
`ob-gap-x-24`	column-gap: var(--ob-size-24)	96px
`ob-gap-y-24`	row-gap: var(--ob-size-24)	96px
`ob-gap-28`	gap: var(--ob-size-28)	122px
`ob-gap-x-28`	column-gap: var(--ob-size-28)	122px
`ob-gap-y-28`	row-gap: var(--ob-size-28)	122px
`ob-gap-32`	gap: var(--ob-size-32)	128px
`ob-gap-x-32`	column-gap: var(--ob-size-32)	128px
`ob-gap-y-32`	row-gap: var(--ob-size-32)	128px
`ob-gap-36`	gap: var(--ob-size-36)	144px
`ob-gap-x-36`	column-gap: var(--ob-size-36)	144px
`ob-gap-y-36`	row-gap: var(--ob-size-36)	144px
`ob-gap-40`	gap: var(--ob-size-40)	160px
`ob-gap-x-40`	column-gap: var(--ob-size-40)	160px
`ob-gap-y-40`	row-gap: var(--ob-size-40)	160px
`ob-gap-44`	gap: var(--ob-size-44)	176px
`ob-gap-x-44`	column-gap: var(--ob-size-44)	176px
`ob-gap-y-44`	row-gap: var(--ob-size-44)	176px
`ob-gap-48`	gap: var(--ob-size-48)	192px
`ob-gap-x-48`	column-gap: var(--ob-size-48)	192px
`ob-gap-y-48`	row-gap: var(--ob-size-48)	192px
`ob-gap-52`	gap: var(--ob-size-52)	208px
`ob-gap-x-52`	column-gap: var(--ob-size-52)	208px
`ob-gap-y-52`	row-gap: var(--ob-size-52)	208px
`ob-gap-56`	gap: var(--ob-size-56)	224px
`ob-gap-x-56`	column-gap: var(--ob-size-56)	224px
`ob-gap-y-56`	row-gap: var(--ob-size-56)	224px
`ob-gap-60`	gap: var(--ob-size-60)	240px
`ob-gap-x-60`	column-gap: var(--ob-size-60)	240px
`ob-gap-y-60`	row-gap: var(--ob-size-60)	240px
`ob-gap-64`	gap: var(--ob-size-64)	256px
`ob-gap-x-64`	column-gap: var(--ob-size-64)	256px
`ob-gap-y-64`	row-gap: var(--ob-size-64)	256px
`ob-gap-72`	gap: var(--ob-size-72)	288px
`ob-gap-x-72`	column-gap: var(--ob-size-72)	288px
`ob-gap-y-72`	row-gap: var(--ob-size-72)	288px
`ob-gap-80`	gap: var(--ob-size-80)	320px
`ob-gap-x-80`	column-gap: var(--ob-size-80)	320px
`ob-gap-y-80`	row-gap: var(--ob-size-80)	320px
`ob-gap-96`	gap: var(--ob-size-96)	384px
`ob-gap-x-96`	column-gap: var(--ob-size-96)	384px
`ob-gap-y-96`	row-gap: var(--ob-size-96)	384px