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

Columns and Rows Dimensions

The TileLayout is based on the CSS Grid Layout and is configurable in a similar fashion.

To define the number of visual columns in the component, use the columns property. By default, the component will display a single column. The number of rows will be calculated automatically based on the number of tiles and their size.

    <kendo-tilelayout [columns]="2"></kendo-tilelayout>


You can customize the width of the columns and the height of the rows by using the columnWidth and rowHeight options. By default, both properties are set to 1fr which means that the size of each column and row will be determined automatically based on the available space.

Depending on the value of the columnWidth property, the total width of all columns may exceed the available space. In such cases, some items will overflow the TileLayout container.

The following example demonstrates how to customize the size of the TileLayout columns and rows.

View Source
Change Theme:


By default, the spacing between the columns and the rows is set to 16px. It can be customized by setting the gap configuration option which accepts either numeric values, which are treated as pixels, or a TileLayoutGap configuration object with the following keys:

  • rows(number)—Sets the vertical spacing between the rows in pixels.
  • cols(number)—Sets the horizontal spacing between the columns in pixels.

The following example demonstrates how to set the horizontal and vertical gaps.

View Source
Change Theme:

In this article

Not finding the help you need?