CSS Utilities Gap

Gap

These utility classes set the space between items inside a flex or grid container. Pair them with a layout utility like cluster, stack, grid, or split to override that layout's default spacing, or apply wa-gap-* to any display: flex or display: grid element of your own to get the same tokens without writing custom CSS.

Every class besides wa-gap-0 corresponds to one of the --wa-space-* tokens in your theme, so the spacing you pick stays in sync with the rest of your design system.

Gap Classes

Class Name gap Value Preview
wa-gap-0 0
wa-gap-3xs --wa-space-3xs
wa-gap-2xs --wa-space-2xs
wa-gap-xs --wa-space-xs
wa-gap-s --wa-space-s
wa-gap-m --wa-space-m
wa-gap-l --wa-space-l
wa-gap-xl --wa-space-xl
wa-gap-2xl --wa-space-2xl
wa-gap-3xl --wa-space-3xl
wa-gap-4xl --wa-space-4xl
wa-gap-5xl --wa-space-5xl
    No results