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 thegrid-auto-flowCSS property of the TileLayout tocolumn.column-dense—Sets thegrid-auto-flowCSS property of the TileLayout tocolumn dense.row—Sets thegrid-auto-flowCSS property of the TileLayout torow.row-dense—Sets thegrid-auto-flowCSS property of the TileLayout torow dense.none—Does not apply thegrid-auto-flowCSS property. In this case the default behavior of the CSS Grid Layout will be used.
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.
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.