# Vue GridLayout Overview

The Kendo UI for Vue GridLayout component allows you to effortlessly arrange the contents of the component in rows and columns in a grid structure.

It offers grid-layout system with rows and columns. It is based on the [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/) where you can configure items per a specific row and column, as well as span content across them.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the GridLayout component in action and also showcases other Kendo UI for Vue components—the [Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar), [ChipList](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist) and [Card](https://www.telerik.com/kendo-vue-ui-develop/components/layout/card) components. The components are arranged in a grid structure by defining the columns, rows, and gaps between them.

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

> The GridLayout is part of the [Layout](https://www.telerik.com/kendo-vue-ui-develop/components/layout) package, part of the Kendo UI for Vue library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the GridLayout and the rest of the components in the package, see the [Getting Started with the Kendo UI for Vue Layout Package](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started) guide.

## Key Features

* [Rows and columns](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout/rows-columns)— To configure the appearance of the GridLayout, you can use the `rows` and `cols` properties.
* [Gaps](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout/gaps)—The setting of the gaps is another way to alter the appearance of the GridLayout.
* [Horizontal alignment](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout/alignment#horizontal-alignment)—Four predefined values allows you to control the horizontal alignment.
* [Vertical alignment](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout/alignment#vertical-alignment)—Four predefined values allows you to control the vertical alignment.
* [Items Arrangement](https://www.telerik.com/kendo-vue-ui-develop/components/layout/gridlayout/items)—The GridLayout enables you to control the arrangement of its items.

## Suggested Links

* [Getting Started with the Kendo UI for Vue Layout Package](https://www.telerik.com/kendo-vue-ui-develop/components/layout/get-started)
* [API Reference of the GridLayoutProps](https://www.telerik.com/kendo-vue-ui-develop/components/layout/api/gridlayoutprops)
* [Kendo UI for Vue GridLayout High-Level Overview](https://www.telerik.com/kendo-vue-ui/gridlayout)