• Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting

Kendo UI for Angular GridLayout Overview

The Kendo UI for Angular GridLayout allows you to easily arrange its contents in rows and columns, forming a grid structure. It is based on the CSS Grid Layout system, which allows setting the specific row, column and size of each item.

The GridLayout Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the GridLayout in action.

View Source
Change Theme:

Key Features

  • Items—The GridLayout enables you to control the size and position of its items.
  • Rows and Columns—To configure the appearance of the GridLayout, use the rows and cols properties.
  • Gaps—Customize the spacing between the rows and columns of the GridLayout by setting its gap property.
  • Alignment—You can control the alignment of the items in the GridLayout based on the X and Y axes.
  • Globalization—All Kendo UI for Angular Layout components provide globalization options.

In this article

Not finding the help you need?