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 name
Properties
Change here
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.
