Gaps
Style structure
Utilities for controlling gutters between grid and flexbox items. Used the most common gaps. We don't use gap on axis `gap-x-1` since the usage is so small and the class can be generated by developer when needed.
Class
Properties
ks-gap-0
gap: 0px;
ks-gap-1
gap: 0.25rem; /* 4px */
ks-gap-2
gap: 0.5rem; /* 8px */
ks-gap-4
gap: 1rem; /* 16px */
ks-gap-6
gap: 1.5rem; /* 24px */
ks-gap-8
gap: 2rem; /* 32px */
ks-gap-10
gap: 2.5rem; /* 40px */
ks-gap-12
gap: 3rem; /* 48px */
ks-gap-20
gap: 5rem; /* 80px */
ks-gap-28
gap: 7rem; /* 112px */
Basic usage
Examples
Use the
gap-* utilities to change the gap between both rows and columns in grid and flexbox layouts.
IMPORTANT
The gap property is set on Custom properties, so you will not see it in the Flex settings
