Gap
Web Awesome includes classes to set the gap property of flex and grid containers. Use them alone to create a flex container with a gap, or use them alongside other Web Awesome layout utilities, like cluster and stack, to change the space between items.
Besides wa-gap-0, which sets gap to zero, each class corresponds to one of the --wa-space-* tokens in your theme.
| 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 |