New to KendoReact? Learn about KendoReact Free.

Layout

Updated on Aug 14, 2026

The StackLayout component provides options for controlling its appearance.

To customize the layout of the StackLayout, use any of the following configuration options:

Orientation

To set the StackLayout orientation, use the orientation property.

By default, orientation is set to horizontal.

Example
View Source
Loading ...

Gaps

To set the StackLayout gaps, use the gap property.

By default, the StackLayout does not apply a gap.

Example
View Source
Loading ...

Horizontal alignment

To set the StackLayout 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
Loading ...

Vertical alignment

To set the StackLayout vertical 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
Loading ...

Nested StackLayouts

The component enables you to create a more complex layout that includes both horizontal and vertical items by nesting StackLayout components inside one another.

Example
View Source
Loading ...