• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact TileLayout Overview

The KendoReact TileLayout component is based on the two-dimensional CSS 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.


The following example demonstrates the TileLayout in action.

Example
View Source
Change Theme:

The example above showcases the TileLayout among other KendoReact components, namely the Grid and Chart components. The types of React Charts shown here are Line charts and a Donut chart, which is a variation of the React Pie chart.

The TileLayout is part of the KendoReact 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 guide.

Key Features

  • Auto Flows—The TileLayout allows you to control how the auto-placement algorithm works.
  • Tiles settings—You can customize the behavior of the tiles in the TileLayout.
  • Globalization—The TileLayout has built-in globalization support.
  • Resizable tiles—End users can resize the tiles according to their needs.
  • Reorderable tiles—End users can drag and reorder tiles across the layout.

In this article

Not finding the help you need?