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-* 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 |
If you want to use this utility only without all others, you can include the following CSS file from the Web Awesome CDN.
Add the following code to the <head> of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/utilities/gap.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/utilities/gap.css');
Want them all? Follow the instructions on the Utilities overview page to get all Web Awesome utilities.