Getting Started
    • Barcodes
    • Buttons
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filterupdated
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBarsupdated
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilitiesnew
    Styling & Themes
    Common Features
    Project Setup

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

  • ItemsThe GridLayout enables you to control the size and position of its items.
  • Rows and ColumnsTo configure the appearance of the GridLayout, use the rows and cols properties.
  • GapsCustomize the spacing between the rows and columns of the GridLayout by setting its gap property.
  • AlignmentYou can control the alignment of the items in the GridLayout based on the X and Y axes.
  • GlobalizationAll Kendo UI for Angular Layout components provide globalization options.

In this article

Not finding the help you need?