---
title: Gap
position: 15
seo_title: Telerik and Kendo UI Gap Utilities
seo_description: Use the Telerik and Kendo UI Gap Utilities to control
  the size of the gap between rows and columns in a flex or grid container.
---
## 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.

<CSSRulesList data='{"id":"gap"}'></CSSRulesList>

### Gap Size

Use the `k-gap-{size}` utility to set the gap size between the rows and columns in a flex or grid container.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/gap/size","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-w-full k-p-4 k-d-flex k-justify-content-center k-rounded-lg"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/gap/size-x-y","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-w-full k-p-4 k-d-flex k-justify-content-center k-rounded-lg"}}'></LiveDemo>