Introduction
Getting Started
Vue 2 End of Support
Native Components
- Animation
- Buttons
- Chartsupdated
- Conversational UI
- Data Query
- Data Tools
- Date Inputs
- Date Math
- Dialogs
- Drawing
- Dropdowns
- Editor
- Excel Export
- File Saver
- Form
- Gauges
- Grid
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- - Overview
  - Getting Started
  - ActionSheet
  - AppBar
  - Avatar
  - BottomNavigation
  - Card
  - ContextMenu
  - Drawer
  - ExpansionPanel
  - GridLayout
  - - Overview
    - Rows and Columns
    - Gaps
    - Alignment
    - Items Arrangement
  - Menu
  - PanelBar
  - Splitter
  - StackLayout
  - Stepper
  - TabStrip
  - TileLayout
  - Wizard
  - Globalization
  - API
- ListBox
- ListView
- Notification
- PDF Processing
- Popup
- Progress Bars
- Scheduler
- ScrollView
- Tooltip
- TreeList
- TreeView
- Upload
Wrapper Components
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Layout / GridLayout / Items Arrangement /

New to Kendo UI for Vue? Start a free 30-day trial

GridLayout Items Arrangement

The GridLayout component enables you to control the arrangement and dimensions of its items.

You can arrange the layout of the items through the following configuration properties:

col—Defines the column line from which the GridLayoutItem will start.
row—Defines the row line from which the GridLayoutItem will start.
colSpan—Specifies the number of columns over which the GridLayoutItem will span.
rowSpan—Specifies the number of rows over which the GridLayoutItem will span.

Example

View Source

Change Theme:

Suggested Links

API Reference of the GridLayoutProps