Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

GridLayoutProps

Represents the props of the KendoReact GridLayout component.

NameTypeDefaultDescription

align?

GridLayoutAlign

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

The possible keys are:

  • horizontalDefines the possible horizontal alignment of the inner GridLayout elements.
    • startUses the start point of the container.
    • centerUses the central point of the container.
    • endUses the end point of the container.
    • (Default)stretchStretches the items to fill the width of the container.
  • vertical Defines the possible vertical alignment of the inner GridLayout elements.
    • topUses the top point of the container.
    • middleUses the middle point of the container.
    • bottomUses the bottom point of the container.
    • (Default)stretchStretches the items to fill the height of the container.

children?

React.ReactNode

The React elements that will be rendered inside the GridLayout.

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.

rows?

GridLayoutRowProps[]

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

style?

React.CSSProperties

Sets additional CSS styles to the GridLayout.

In this article

Not finding the help you need?