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 following example demonstrates the TileLayout in action.
- 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.
The TileLayout component is not supported in IE 11 and below as its implementation relies entirely on the CSS Grid Layout.
Placing the TileLayout within an element with
relativewill result in undesired offsetting of the Tiles during resizing and reordering.