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.
<kendo-tilelayout [columns]="2"></kendo-tilelayout>Size
You can 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 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.
Spacing
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.