---
title: Overview
position: 1
seo_title: Overview of the GridLayout Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  GridLayout component and check out the extensive set of available options in
  its live demo.
---
## GridLayout Overview

The GridLayout component provides a flexible framework for arranging UI elements into rows and columns within a grid structure. Based on the CSS grid layout system, it enables developers to define the number of items per row or column, as well as span content across them for a more dynamic arrangement. The GridLayout allows you to achieve a consistent and cohesive UI design across your app by applying uniform structural rules to multiple pages. This component works with content ranging from basic text to full components such as cards, charts, and more.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/gridlayout/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/gridlayout/"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/gridlayout/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/gridlayout/overview"}],"demo":"components/gridlayout/overview"}'></LiveDemo>

### Appearance

GridLayout provides built-in arranging options that grant visually appealing and flexible rendering experience. 

Apart from the default vision of the Telerik and Kendo UI GridLayout, the component supports alternative styling options that enable you to configure the individual aspects of its appearance.

#### Anatomy

The anatomy of the GridLayout summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Inner element"},{"text":"Gap"},{"text":"Row"},{"text":"Column"},{"text":"GridLayout container"}]}'>![A Telerik and Kendo UI GridLayout component and its elements including inner element, gap, row, column and GridLayout container.](images/components-gridlayout-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI GridLayout component")</BlueprintImage>

#### Horizontal Alignment

Depending on the horizontal alignment of the inner elements, the Telerik and Kendo UI GridLayout provides the following arranging configurations:

* Left 
* Center
* Right
* Stretch

<BlueprintImage data='{"description":"","labels":[{"text":"Left"},{"text":"Center"},{"text":"Right"},{"text":"Stretch"}]}'>![The four possible horizontal alignment options of the Telerik and Kendo UI GridLayout component](images/components-gridlayout-overview-alignment-horizontal.png "The left, center, right, and stretch horizontal alignments of the Telerik and Kendo UI GridLayout")</BlueprintImage>

#### Vertical Alignment

Depending on the vertical alignment of the inner elements, the Telerik and Kendo UI GridLayout provides the following arranging configurations:

* Top
* Center
* Bottom
* Stretch

<BlueprintImage data='{"description":"","labels":[{"text":"Top"},{"text":"Center"},{"text":"Bottom"},{"text":"Stretch"}]}'>![The four possible vertical alignment options of the Telerik and Kendo UI GridLayout component](images/components-gridlayout-overview-alignment-vertical.png "The top, center, bottom and stretch vertical alignments of the Telerik and Kendo UI GridLayout")</BlueprintImage>

<Notification data='{"type":"default","content":"Vertical and horizontal alignment options can be combined in the GridLayout container to achieve any desired positioning of the inner elements."}'>Vertical and horizontal alignment options can be combined in the GridLayout container to achieve any desired positioning of the inner elements.</Notification>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular GridLayout","description":"Find more information about the Kendo UI for Angular GridLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/gridlayout/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor GridLayout","description":"Find more information about the Telerik UI for Blazor GridLayout in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/gridlayout/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact GridLayout","description":"Find more information about the KendoReact GridLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue GridLayout","description":"Find more information about the Kendo UI for Vue GridLayout in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/gridlayout/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core GridLayout","description":"Find more information about the Telerik UI for ASP.NET Core GridLayout component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/gridlayout/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC GridLayout","description":"Find more information about the Telerik UI for ASP.NET MVC GridLayout component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/gridlayout/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>