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
New to Kendo UI for Angular? Start a free 30-day trial


The GridLayout items represent the content containers within the component.

To define the item containers, add GridLayoutItem components by nesting <kendo-gridlayout-item> tags inside the <kendo-gridlayout> element. They will hold the arbitrary content of the item.

Size and Position

The GridLayout items occupy a predefined number of rows and columns. The default size of each item is one row and one column. Additionally you could pin-point their position to a specific column and row.

The following list contains all available configuration options related to the sizing and positioning of the items:

  • rowSpecifies the row of the item in the GridLayout.
  • colSpecifies the column of the item in the GridLayout.
  • rowSpanSpecifies the number of rows the item will occupy. The default size is one row.
  • colSpanSpecifies the number of columns the item will occupy. The default size is one column.

The following example demonstrates how to set various size and positioning options.

View Source
Change Theme:

In this article

Not finding the help you need?