• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
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
Change Theme:

In this article

Not finding the help you need?