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 Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation, and demos.
Kendo UI for Vue GridLayout Component - Header image
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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
kendo

Get Started with Kendo UI for Vue

Kendo UI