Columns and Rows Dimensions
The TileLayout is based on the CSS Grid Layout and is configurable in a similar fashion. To define the number of visual columns in the component use the columns property. By default the component will display a single column. The number of rows will be calculated automatically based on the number of tiles and their size.
You could customize the width of the columns and the height of the rows by using the columnWidth and rowHeight options. By default both properties are set to
1fr which means that the size of each column and row will be determined automatically based on the available space.
Depending on the value of the
columnWidthproperty, the total width of all columns could exceed the available space. In such cases some items will overflow the TileLayout container.
The following example demonstrates customizing the size of the TileLayout columns and rows.
By default the spacing between the columns and the rows is set to
16px. It can be customized by setting the gap configuration option, which accepts either numeric values (treated as pixels) or a TileLayoutGap configuration object with the following keys:
rows(number)—Used to set the vertical spacing between the rows in pixels.
cols(number)—Used to set the horizontal spacing between the columns in pixels.
The following example demonstrates setting the horizontal and vertical gaps.