GridLayout

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

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:

1. Inner element
2. Gap
3. Row
4. Column
5. GridLayout container

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

1. Left
2. Center
3. Right
4. Stretch

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

1. Top
2. Center
3. Bottom
4. Stretch

Framework-Specific Documentation

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

Kendo UI for Angular GridLayoutFind more information about the Kendo UI for Angular GridLayout in the official product documentation of the component.

Telerik UI for Blazor GridLayoutFind more information about the Telerik UI for Blazor GridLayout in the official product documentation of the component.

KendoReact GridLayoutFind more information about the KendoReact GridLayout in the official product documentation of the component.

Kendo UI for Vue GridLayoutFind more information about the Kendo UI for Vue GridLayout in the official product documentation of the component.

Telerik UI for ASP.NET Core GridLayoutFind more information about the Telerik UI for ASP.NET Core GridLayout component.

Telerik UI for ASP.NET MVC GridLayoutFind more information about the Telerik UI for ASP.NET MVC GridLayout component.