Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
Web Awesome includes classes to set the gap property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like cluster and stack, to change the space between items.
Or even by themselves — all gap properties also set display: flex with a specificity of 0 so that it can be trivially overridden.
Besides wa-gap-0, which sets gap to zero, each class corresponds to one of the --wa-space-* properties 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 |