# KendoReact TileLayout Overview

The KendoReact TileLayout component is based on the two-dimensional [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) and displays content in tiles. They can be `resized` and `reordered` as desired by the user.

The component features draggable and resizable items (tiles), static ones, various auto flows, fixed widths and heights, configurable number of columns, and many more.

<CtaPanelOverview></CtaPanelOverview>

The following example demonstrates the TileLayout in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/layout/tilelayout/overview/func/source.txt)

The example above showcases the TileLayout among other KendoReact components, namely the [Grid](https://www.telerik.com/kendo-react-ui/components/grid) and [Chart](https://www.telerik.com/kendo-react-ui/components/charts) components. The types of React Charts shown here are [Line](https://www.telerik.com/kendo-react-ui/components/charts/series-types/line) charts and a [Donut](https://www.telerik.com/kendo-react-ui/components/charts/series-types/donut) chart, which is a variation of the React [Pie](https://www.telerik.com/kendo-react-ui/components/charts/series-types/pie) chart.

> The TileLayout is part of the [KendoReact Layout](https://www.telerik.com/kendo-react-ui/components/layout) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the TileLayout and the rest of the components in the package, see the [Getting Started with the KendoReact Layout Package](https://www.telerik.com/kendo-react-ui/components/layout/get-started) guide.

## Key Features

* [Auto Flows](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/auto-flows)—The TileLayout allows you to control how the auto-placement algorithm works.
* [Tiles settings](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles)—You can customize the behavior of the tiles in the TileLayout.
* [Globalization](https://www.telerik.com/kendo-react-ui/components/layout/globalization)—The TileLayout has built-in globalization support.
* [Resizable tiles](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayoutitem#resizable)—End users can resize the tiles according to their needs.
* [Reorderable tiles](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayoutitem#reorderable)—End users can drag and reorder tiles across the layout.

## Suggested Links

* [Getting Started with the KendoReact Layout Package](https://www.telerik.com/kendo-react-ui/components/layout/get-started)
* [API Reference of the TileLayout](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayout)
* [API Reference of the TileLayoutProps](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayoutprops)
* [API Reference of the TileLayoutItem](https://www.telerik.com/kendo-react-ui/components/layout/api/tilelayoutitem)