Gap
Placer Toolkit includes classes to set the gap property of flex and grid containers. They can be used alongside other Placer Toolkit 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 pc-gap-0, which sets gap to 0, each class corresponds to one of the --pc-spacing-* tokens in your theme.
| Class name | gap value | Preview |
|---|---|---|
pc-gap-0 | 0 | |
pc-gap-xxxs | --pc-spacing-xxxs | |
pc-gap-xxs | --pc-spacing-xxs | |
pc-gap-xs | --pc-spacing-xs | |
pc-gap-s | --pc-spacing-s | |
pc-gap-m | --pc-spacing-m | |
pc-gap-l | --pc-spacing-l | |
pc-gap-xl | --pc-spacing-xl | |
pc-gap-xxl | --pc-spacing-xxl | |
pc-gap-xxxl | --pc-spacing-xxxl | |
pc-gap-xxxxl | --pc-spacing-xxxxl | |
pc-gap-xxxxxl | --pc-spacing-xxxxxl |