Components
    • Barcodes
    • Buttons
    • Charts
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListView
    • Mapbeta
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PivotGridbeta
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    Styling & Themes
    Common Features
    Project Setup
New to Kendo UI for Angular? Start a free 30-day trial

Items

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:

  • row—Specifies the row of the item in the GridLayout.
  • col—Specifies the column of the item in the GridLayout.
  • rowSpan—Specifies the number of rows the item will occupy. The default size is one row.
  • colSpan—Specifies 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?