Vue TileLayout Overview

Updated on Sep 9, 2026

The Kendo UI for Vue 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.

ninja-iconThe TileLayout is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The following example demonstrates the TileLayout in action.

Example
View Source
Loading ...

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

The TileLayout is part of the Kendo UI for Vue 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 Kendo UI for Vue 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.

Support and Learning Resources

Additional Resources