• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

GridLayout Alignment

The GridLayout component provides options for controlling the alignment of its items. Check the following links for more details.

Horizontal alignment

To set the GridLayout horizontal alignment, use the align property. The horizontal key controls the alignment of the inner elements based on the X axis.

The available values are:

  • start—Uses the start point of the container.
  • center—Uses the central point of the container.
  • end—Uses the end point of the container.
  • (Default)stretch—Stretches the items to fill the width of the container.
Example
View Source
Change Theme:

Vertical alignment

To set the GridLayout horizontal alignment, use the align property. The vertical key controls the alignment of the inner elements based on the Y axis.

The available values are:

  • top—Uses the top point of the container.
  • middle—Uses the middle point of the container.
  • bottom—Uses the bottom point of the container.
  • (Default)stretch—Stretches the items to fill the height of the container.
Example
View Source
Change Theme: