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

Auto Flow

The TileLayout arranges its tiles based on the CSS Grid Layout.

Each container determines its starting position in accordance with the following auto-placement rules and the CSS grid-auto-flow configuration option. To specify which auto flow algorithm to be used, use the autoFlow property of the TileLayout.

The TileLayout supports the following autoFlow values:

  • 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 the 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 according to their order.

The following example demonstrates this scenario.

Example
View Source
Edit In Stackblitz  
Change Theme:

Fixed Tile Position

You can place a tile at a fixed position by setting both its row and col options. In this way the tile will preserve its initial position and will not flow regardless of the currently set autoFlow algorithm. Tiles that are 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 tile reordering and tile resizing.

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

The following example demonstrates how to set fixed positions for several tiles.

Example
View Source
Edit In Stackblitz  
Change Theme: