Items

Updated on Oct 1, 2026

You can control the items in the GridLayout with the parameters they expose:

• Row

• Column

• ColumnSpan

• RowSpan

• Example: Complex Grid Layout

Row

The Row parameter controls in which row the GridLayoutItem will reside. The row indexes in the component are 1-based. If no rows are defined, the items will be displayed in r = i / c rows, where:

• r is the number of rows;

• i is the number of items;

• c is the number of columns;

Distribute the GridLayout items across the rows.

Example

View Source

Loading ...

Column

The Column parameter controls in which column the GridLayoutItem will reside. The column indexes in the component are 1-based. If no columns are defined, the GridLayout items will be displayed in one column.

Distribute the GridLayout items across the columns.

Example

View Source

Loading ...

ColumnSpan

The ColumnSpan parameter defines the how many columns the item will occupy.

When you set the desired ColumnSpan, you should also set the Column parameter to specify the start position for the spanned item.

Change the column span of the first item with the numeric text box

Example

View Source

Loading ...

RowSpan

The RowSpan parameter defines how many rows the item will occupy.

When you set the desired RowSpan, you should also set the Row parameter to specify the start position for the spanned item.

Change the row span of the first item with the numeric text box

Example

View Source

Loading ...

Example: Complex Grid Layout

You can use the exposed parameters of the GridLayout items to create more complex layouts.

Create a page layout with the GridLayout component

Example

View Source

Loading ...

See Also

• Overview