---
title: Place Content
position: 23
seo_title: Telerik and Kendo UI lace Content Utilities
seo_description: Use the Telerik and Kendo UI Place Content Utilities to control how the flex and grid content will be aligned along both axes.
---
## Place Content

The Telerik and Kendo UI lace Content Utilities are CSS utility classes that enable you to control how the element's children will be aligned along  both axes.

<CSSRulesList data='{"id":"place-content"}'></CSSRulesList>

### Stretch

Use the `k-place-content-stretch` utility to stretch the items equally within the entire container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/stretch","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-p-5 k-d-flex k-d-justify-content k-d-align-items k-rounded-lg"}}'></LiveDemo>

### Center

Use the `k-place-content-center` utility to align the items in the center of the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/center","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":""}}'></LiveDemo>

### Start

Use the `k-place-content-start` utility to align the items at the start of the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/start","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":""}}'></LiveDemo>

### End

Use the `k-place-content-end` utility to align the items at the end the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/end","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-place-content-center k-p-5 k-rounded-lg"}}'></LiveDemo>

### Normal

Use the `k-place-content-normal` utility to align the items at their default positions when no `place-content` value is set.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/normal","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-place-content-center k-p-5 k-rounded-lg"}}'></LiveDemo>

### Space Between

Use the `k-place-content-between` utility to distribute the items with an equal space between them within the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/between","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-place-content-center k-p-5 k-rounded-lg"}}'></LiveDemo>

### Space Around

Use the `k-place-content-around` utility to distribute the items with an equal space around them within the container along the main axis.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/around","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-place-content-center k-p-5 k-rounded-lg"}}'></LiveDemo>

### Space Evenly

Use the `k-place-content-evenly` utility to distribute the items with an equal space between them within the container along the main axis. The same space appears before the first and after the last item.

<LiveDemo data='{"links":[],"demo":"utils/flex-grid/place-content/evenly","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-text-center k-text-white k-align-items-center k-d-flex k-place-content-center k-p-5 k-rounded-lg"}}'></LiveDemo>