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 cs-gap-* to any display: flex or display: grid element of your own to get the same tokens without writing custom CSS.

Every class besides cs-gap-0 corresponds to one of the --cs-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
cs-gap-0	0
cs-gap-3xs	--cs-space-3xs
cs-gap-2xs	--cs-space-2xs
cs-gap-xs	--cs-space-xs
cs-gap-s	--cs-space-s
cs-gap-m	--cs-space-m
cs-gap-l	--cs-space-l
cs-gap-xl	--cs-space-xl
cs-gap-2xl	--cs-space-2xl
cs-gap-3xl	--cs-space-3xl
cs-gap-4xl	--cs-space-4xl
cs-gap-5xl	--cs-space-5xl