Kendo UI for Vue

Vue GridLayout

  • Easily organize the component contents in rows and columns in a grid structure with the Vue GridLayout component.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
The GridLayout component being used to organize cards
  • Overview

    The Kendo UI for Vue GridLayout component enables you to easily arrange its contents into rows and columns in a grid structure. It offers a grid-like system for organizing the app content based on the CSS grid layout. You can configure items per row or column, as well as span content across them. The Vue GridLayout allows you to ensure UI consistency by applying the same basic rules (page structure) across multiple pages throughout your entire app.

    See the Vue GridLayout demo

    Kendo UI for Vue GridLayout Overview
  • Layout

    With the Vue GridLayout, you get full control over the grid rows and columns, gaps and alignment. The rows and columns enable you to specify the number and size of each. Gaps, on the other hand, let you define the spacing between the items, while the alignment sets the position of the content within a cell.

    See the Vue GridLayout demo

    Kendo UI for Vue Layout GridLayout component
  • Items

    The Vue GridLayout component enables you to easily play with the arrangement and dimensions of its items. By default, the size of each item is one row wide and one column high. Similar to other CSS grid systems, you can specify an exact item position or span items across rows and columns.

    See the Vue GridLayout Items demo

    Kendo UI for React GridLayout component
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka