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 110+ 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
Change Theme:

Key Features

  • Tiles configuration—The TileLayout supports a number of settings for configuring the size and position of the tile rows and columns.
  • Columns and rows dimensions—The TileLayout provides options for defining the number of visual columns and for setting the layout of its rows and columns.
  • Auto flow—The TileLayout enables you to choose whether the component will use the auto-placement rules or the CSS grid-auto-flow configuration option.
  • Tiles reordering—You 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 resizing—You 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 collection—The 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.
  • Globalization—All Kendo UI for Angular Layout components provide globalization options.

Known Limitations

  • Placing the TileLayout within an element with position set to absolute or relative will result in undesired offsetting of the Tiles during resizing.

Support and Learning Resources

Additional Resources