New to KendoReactLearn about KendoReact Free.

Layout

The GridLayout component provides options for controlling its appearance.

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

Rows and columns

To configure the GridLayout, use the rows and cols properties.

Change Theme
Theme
Loading ...

Gaps

To set the GridLayout gaps, use the gap property.

By default, the GridLayout does not apply a gap.

Change Theme
Theme
Loading ...

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.
Change Theme
Theme
Loading ...

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.
Change Theme
Theme
Loading ...