• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
      • Overview
      • Getting Started
      • ActionSheetnew
      • AppBar
      • Avatar
      • BottomNavigation
      • Card
      • ContextMenu
      • Drawer
      • ExpansionPanelnew
      • GridLayoutnew
      • Menu
      • PanelBar
      • Splitter
      • StackLayoutnew
      • Stepper
      • TabStrip
      • TileLayoutupdated
      • 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
New to Kendo UI for Vue? Start a free 30-day trial

GridLayoutProps

Represents the props of the Kendo UI for Vue GridLayout component.

NameTypeDefaultDescription

align?

any

Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos here and here).

The possible keys are:

  • horizontal—Defines the possible horizontal alignment of the inner GridLayout elements.
    • start—Uses the start point of the container.
    • center—Uses the central point of the container.
    • end—Uses the end point of the container.
    • (Default)stretch—Stretches the items to fill the width of the container.
  • vertical— Defines the possible vertical alignment of the inner GridLayout elements.
    • top—Uses the top point of the container.
    • middle—Uses the middle point of the container.
    • bottom—Uses the bottom point of the container.
    • (Default)stretch—Stretches the items to fill the height of the container.

className?

string

Sets additional CSS classes to the GridLayout.

cols?

GridLayoutColumnProps[]

Specifies the default number of columns and their widths (see example).

gap?

GridLayoutGap

Specifies the gaps between the elements (see example).

  • The possible keys are:
  • rows
  • columns

id?

string

Sets the id property of the root GridLayout element.

items?

GridLayoutItemProps[]

The collection of GridLayoutItemProps.

rows?

GridLayoutRowProps[]

Specifies the default number of rows and their height (see example).

style?

any

Sets additional CSS styles to the GridLayout.

In this article

Not finding the help you need?