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>

Columns and Rows Size

You could 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 could exceed the available space. In such cases some items will overflow the TileLayout container.

The following example demonstrates customizing the size of the TileLayout columns and rows.

Example
View Source
Edit In Stackblitz  
Change Theme:

Columns and Rows Gap

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 (treated as pixels) or a TileLayoutGap configuration object with the following keys:

  • rows(number)Used to set the vertical spacing between the rows in pixels.
  • cols(number)Used to set the horizontal spacing between the columns in pixels.

The following example demonstrates setting the horizontal and vertical gaps.

Example
View Source
Edit In Stackblitz  
Change Theme: