Skip to main content

Gap

Flexbox & Grid

Utilities for controlling gutters between grid and flexbox items.

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