---
title: Align Items
position: 16
seo_title: Telerik and Kendo UI Align Items Utilities
seo_description: Use the Telerik and Kendo UI Align Items Utilities to
  control how grid and flex items will be aligned to each other along the cross
  axis.
---
## Align Items

The Telerik and Kendo UI Align Items Utilities are CSS utility classes that enable you to control how grid and flex items will be aligned to each other along the cross axis.

<CSSRulesList data='{"id":"align-items"}'></CSSRulesList>

### Stretch

Use the `k-align-items-stretch` utility to stretch the items in a row equally along the cross axis.

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

### Center

Use the `k-align-items-center` utility to center the items in a row of the container along the cross axis.

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

### Start

Use the `k-align-items-start` utility to align the items in a row to the start of the container along the cross axis.

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

### End

Use the `k-align-items-end` utility to align the items in a row to the end of the container along the cross axis.

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

### Baseline

Use the `k-align-items-baseline` utility to align the items in a row to the baseline of the container along the cross axis.

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