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

Auto Flow

The TileLayout arranges the tiles based on the CSS Grid Layout. Each container will determine its starting position in accordance with the following auto-placement rules and the CSS grid-auto-flow configuration option. In order to specify which auto flow algorithm to be used, use the autoFlow property of the TileLayout.

The available autoFlow values are:

  • column (Default)Sets the grid-auto-flow CSS property of the TileLayout to column.
  • column-denseSets the grid-auto-flow CSS property of the TileLayout to column dense.
  • rowSets the grid-auto-flow CSS property of the TileLayout to row.
  • row-denseSets the grid-auto-flow CSS property of the TileLayout to row dense.
  • noneDoes not apply the grid-auto-flow CSS property. In this case the default behavior of the CSS Grid Layout will be used.
Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling Auto Flow

When the TileLayout autoFlow option is set to none, and none of the row and col properties of the individual tiles are set, all tiles will automatically be placed sequentially in accordance with their order.

The following example demonstrates this scenario.

Example
View Source
Edit In Stackblitz  
Change Theme:

Fixed Tile Position

You could place a tile at a fixed position by setting its both row and col options. This way the tile will preserve its initial position and will not flow, regardless of the currently set autoFlow algorithm. Tiles configured in this manner will always try to maintain their initial position during reordering or resizing. For additional details on how to handle such scenarios, refer to the corresponding articles about Reordering and Resizing.

If several tiles have the same fixed position, they will overlap in the resulting rendering of the TileLayout.

The following example demonstrates setting fixed positions for several tiles.

Example
View Source
Edit In Stackblitz  
Change Theme: