Gap
The Telerik and Kendo UI Gap Utilities are CSS utility classes that enable you to control the gap size between the rows and columns in a flex or grid container.
| Utility Class | CSS Property |
|---|---|
.k-gap-0 | gap: 0; |
.k-gap-1px | gap: 1px; |
.k-gap-1 | gap: 0.25rem; |
.k-gap-xs | gap: 0.25rem; |
.k-gap-sm | gap: 0.5rem; |
.k-gap-md | gap: 0.75rem; |
.k-gap-lg | gap: 1rem; |
.k-gap-xl | gap: 1.5rem; |
.k-gap-thin | gap: 0.125rem; |
.k-gap-hair | gap: 1px; |
.k-gap-x-0 | column-gap: 0; |
.k-gap-x-1px | column-gap: 1px; |
.k-gap-x-1 | column-gap: 0.25rem; |
.k-gap-x-xs | column-gap: 0.25rem; |
.k-gap-x-sm | column-gap: 0.5rem; |
.k-gap-x-md | column-gap: 0.75rem; |
.k-gap-x-lg | column-gap: 1rem; |
.k-gap-x-xl | column-gap: 1.5rem; |
.k-gap-x-thin | column-gap: 0.125rem; |
.k-gap-x-hair | column-gap: 1px; |
.k-gap-y-0 | row-gap: 0; |
.k-gap-y-1px | row-gap: 1px; |
.k-gap-y-1 | row-gap: 0.25rem; |
.k-gap-y-xs | row-gap: 0.25rem; |
.k-gap-y-sm | row-gap: 0.5rem; |
.k-gap-y-md | row-gap: 0.75rem; |
.k-gap-y-lg | row-gap: 1rem; |
.k-gap-y-xl | row-gap: 1.5rem; |
.k-gap-y-thin | row-gap: 0.125rem; |
.k-gap-y-hair | row-gap: 1px; |
Gap Size
Use the k-gap-{size} utility to set the gap size between the rows and columns in a flex or grid container.
Block and Inline Size
Use the k-gap-x-{size} and k-gap-y-{size} utilities to set a different gap size for the rows and columns in a flex or grid container.
