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

GridLayoutComponent

Component

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).

Definition

Package:@progress/kendo-angular-layout

Selector:kendo-gridlayout

Export Name:Accessible in templates as #kendoGridLayoutInstance="kendoGridLayout"

Syntax:

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>

Inputs

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

Specifies the gaps between the elements (see example).

Default:

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.