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 can customize the width of the columns and the height of the rows by using the
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 may exceed the available space. In such cases, some items will overflow the TileLayout container.
The following example demonstrates how to customize 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, which are treated as pixels, or a
TileLayoutGap configuration object with the following keys:
rows(number)—Sets the vertical spacing between the rows in pixels.
cols(number)—Sets the horizontal spacing between the columns in pixels.
The following example demonstrates how to set the horizontal and vertical gaps.