TileLayout Appearance
This article describes how the TileLayout constructs its layout, and what are the parameters that affect its appearance. To understand the component behavior in more depth, get familiar with the concept of CSS Grid Layout first. The TileLayout component is based on it as underlying implementation and core properties.
The TileLayout component exposes parameters that control its layout at two levels:
Main Element
The main element defines the number of Columns, the Width and Height of the layout, as well as the ColumnWidth and RowHeight.
The ColumnWidth and RowHeight define the maximum dimensions for each column and row of the main layout. As the overall component dimensions change (e.g., because of different viewports), the column and row heights might decrease to provide even distribution. A single tile can span more than one column or row.
Generally, you should use settings that allow the desired number of columns and rows (depending on their width and height) to fit in the set width and height of the entire component.
You do not, however, have to set Width and Height - the main measure is the Columns and it will suffice to create a layout.
Since the Tile Layout is a block element, its width defaults to auto in the browser, and the actual width is distributed evenly between the number of Columns. Setting Height="100%" can let the component take up its parent dimensions in terms of height as well.
If the width and height dimensions are insufficient to accommodate the defined row height and column width that the current tiles create, the actual row height and/or column width will decrease so that the appointed number of columns fit in the available width and the existing number of rows fit in the available height.
Columns, Width and Height have no default values.
ColumnWidth and RowHeight default to 1fr. Thus, you may want to omit setting a ColumnWidth in order to get a more responsive (fluid) layout - all columns will then have the same width - a fraction of the total width.
There are two other settings you should take into account if you set explicit dimensions to the main element - the ColumnSpacing and RowSpacing - they are CSS units that define the gaps between the individual columns and rows and count towards the total dimensions of the component. They default to 16px.
Lastly, you can also set the Class parameter that renders at the main wrapping element of the tile layout so you can cascade custom CSS rules through it.
Individual Tiles
Each tile provides settings that define how many columns and rows its takes up - the ColSpan and RowSpan parameters. It also provides a Class parameter so you can cascade CSS rules through it.
ColSpan can affect the actual number of Columns of the entire layout. For example, if you have a tile with ColSpan="2" and Columns="1", the TileLayout will still have two columns.
Resizing and reordering tiles makes them snap to the dimensions of the rows and columns of the main element, and their size determines how they render - they are rendered in the first available slot that accommodates their current size, and then the next tile is rendered in the next available slot. This means that large tiles can leave small gaps that will not be filled in by tiles that do not come immediately after them, even if they are sufficiently small to fit in those gaps, and that dragging a large tile into a slot where there is no room might not be possible. Whether a tile will move before another tile is determined by the mouse cursor position relative to the static tile, not by the overall dimensions and position of the dragged tile - if the mouse cursor is to the left of the vertical middle, the dragged tile will go before the static tile and if the mouse cursor is on the right of the vertical middle, the dragged tile will go after the static tile.
Next Steps
- Find how to set tile content.
- Enable tile resizing and reordering.
- Handle Tile Layout events.
- Manage the Tile Layout state.