GridLayoutComponent

Represents the Kendo UI GridLayout component for Angular. Arranges child components in a two-dimensional grid layout with customizable rows, columns, and gaps (see overview).

html

<kendo-gridlayout [rows]="[100, 200]" [cols]="['1fr', '2fr']" [gap]="10">
  <kendo-gridlayout-item [row]="1" [col]="1">
    <p>Item 1</p>
  </kendo-gridlayout-item>
  <kendo-gridlayout-item [row]="1" [col]="2">
    <p>Item 2</p>
  </kendo-gridlayout-item>
</kendo-gridlayout>

Selector

kendo-gridlayout

Export Name

Accessible in templates as #kendoGridLayoutInstance="kendoGridLayout"

Inputs

Name	Type	Default	Description
align	AlignSettings		Specifies the horizontal and vertical alignment of the inner GridLayout elements (see example).
cols	any[]		Specifies the number of columns and their widths (More details). You can define columns by passing an array where the number of elements determines the number of columns or each element defines the size of the corresponding column. For example, you can use CSS units like px, %, fr, or auto to define the column sizes.
gap	string | number | GridLayoutGapSettings	0	Specifies the gaps between the elements (see example).
rows	any[]		Specifies the number of rows and their height (More details). You can define rows by passing an array where the number of elements determines the number of rows or each element defines the size of the corresponding row. For example, you can use CSS units like px, %, fr, or auto to define the row sizes.