Kendo UI for Angular TileLayout Overview

The Kendo UI for Angular TileLayout displays a collection of tiles and aligns them into columns and rows.

The tiles are highly customizable in terms of content, size, positioning, and the spacing that separates them. The TileLayout also allows end users to rearrange and resize any of the tiles while providing full control over the flow of the component during these events to the developer.

The TileLayout Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the TileLayout in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Key Features

  • Tiles configurationThe TileLayout supports a number of settings for configuring the size and position of the tile rows and columns.
  • Columns and rows dimensionsThe TileLayout provides options for defining the number of visual columns and for setting the layout of its rows and columns.
  • Auto flowThe TileLayout enables you to choose whether the component will use the auto-placement rules or the CSS grid-auto-flow configuration option.
  • Tiles reorderingYou can use the tile reordering options provided by the TileLayout such as enabling or disabling the functionality, using a programmatic approach to implement it, and more.
  • Tiles resizingYou can use the tile resizing options provided by the TileLayout such as enabling or disabling the functionality, using a programmatic approach to implement it, and more.
  • Tiles collectionThe TileLayout delivers an alternative approach to the manual declaration of each container and enables you to render all tiles as a collection of configurable objects.
  • GlobalizationAll Kendo UI for Angular Layout components provide globalization options.

Known Limitations

The TileLayout component is not supported in IE 11 and below as its implementation relies entirely on the CSS Grid Layout.

In this article

Not finding the help you need?