# GridLayout Alignment

The GridLayout component provides options for controlling the alignment of its items. Check the following links for more details.

* [Horizontal alignment](https://www.telerik.com/kendo-vue-ui/components/layout/gridlayout/alignment#horizontal-alignment)
* [Vertical alignment](https://www.telerik.com/kendo-vue-ui/components/layout/gridlayout/alignment#vertical-alignment)

## Horizontal alignment

To set the GridLayout horizontal alignment, use the [`align`](https://www.telerik.com/kendo-vue-ui/components/layout/api/gridlayoutprops#align) property. The `horizontal` key controls the alignment of the inner elements based on the X axis.

The available values are:

* `start`—Uses the start point of the container.
* `center`—Uses the central point of the container.
* `end`—Uses the end point of the container.
* (Default)`stretch`—Stretches the items to fill the width of the container.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/gridlayout/layout/horizontalalign/source.txt)

## Vertical alignment

To set the GridLayout horizontal alignment, use the [`align`](https://www.telerik.com/kendo-vue-ui/components/layout/api/gridlayoutprops#align) property. The `vertical` key controls the alignment of the inner elements based on the Y axis.

The available values are:

* `top`—Uses the top point of the container.
* `middle`—Uses the middle point of the container.
* `bottom`—Uses the bottom point of the container.
* (Default)`stretch`—Stretches the items to fill the height of the container.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/layout/gridlayout/layout/verticalalign/source.txt)

## Suggested Links

* [API Reference of the GridLayoutProps](https://www.telerik.com/kendo-vue-ui/components/layout/api/gridlayoutprops)