@progress/kendo-react-layout/gridlayout/interfaces/GridLayoutProps.d.ts

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { GridLayoutColumnProps } from './GridLayoutColumnProps';
import { GridLayoutRowProps } from './GridLayoutRowProps';
import * as React from 'react';
/**
 * Represents the props of the [KendoReact GridLayout component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
 */
export interface GridLayoutProps {
    /**
     * The React elements that will be rendered inside the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-children)).
     *
     * Example:
     * ```jsx
     * <GridLayout>
     *   <div>Item 1</div>
     *   <div>Item 2</div>
     * </GridLayout>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Sets additional CSS classes to the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-classname)).
     *
     * Example:
     * ```jsx
     * <GridLayout className="custom-class" />
     * ```
     */
    className?: string;
    /**
     * Sets additional CSS styles to the GridLayout ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-style)).
     *
     * Example:
     * ```jsx
     * <GridLayout style={{ gap: '10px' }} />
     * ```
     */
    style?: React.CSSProperties;
    /**
     * Sets the `id` property of the root GridLayout element ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout#toc-id)).
     *
     * Example:
     * ```jsx
     * <GridLayout id="grid-layout" />
     * ```
     */
    id?: string;
    /**
     * Specifies the gaps between the elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-gaps)).
     *
     * * The possible keys are:
     * * `rows`
     * * `columns`
     *
     * Example:
     * ```jsx
     * <GridLayout gap={{ rows: '10px', columns: '20px' }} />
     * ```
     */
    gap?: GridLayoutGap;
    /**
     * Specifies the horizontal and vertical alignment of the inner GridLayout elements ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#horizontal-alignment)).
     *
     * The possible keys are:
     * * `horizontal`&mdash;Defines the possible horizontal alignment of the inner GridLayout elements.
     *   * `start`&mdash;Uses the start point of the container.
     *   * `center`&mdash;Uses the central point of the container.
     *   * `end`&mdash;Uses the end point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     * * `vertical`&mdash; Defines the possible vertical alignment of the inner GridLayout elements.
     *   * `top`&mdash;Uses the top point of the container.
     *   * `middle`&mdash;Uses the middle point of the container.
     *   * `bottom`&mdash;Uses the bottom point of the container.
     *   * (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     *
     * Example:
     * ```jsx
     * <GridLayout align={{ horizontal: 'center', vertical: 'middle' }} />
     * ```
     */
    align?: GridLayoutAlign;
    /**
     * Specifies the default number of columns and their widths ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-rows-and-columns)).
     *
     * Example:
     * ```jsx
     * <GridLayout cols={[{ width: '100px' }, { width: '200px' }]} />
     * ```
     */
    cols?: GridLayoutColumnProps[];
    /**
     * Specifies the default number of rows and their height ([see example](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout/layout#toc-rows-and-columns)).
     *
     * Example:
     * ```jsx
     * <GridLayout rows={[{ height: '50px' }, { height: '100px' }]} />
     * ```
     */
    rows?: GridLayoutRowProps[];
}
/**
 * Specifies the gaps between the elements.
 */
export interface GridLayoutGap {
    /**
     * Represents the row gap between the elements
     */
    rows?: number | string;
    /**
     * Represents the column gap between the elements
     */
    cols?: number | string;
}
/**
 * Specifies the horizontal and vertical alignment of the inner GridLayout elements.
 */
export interface GridLayoutAlign {
    /**
     * Defines the possible horizontal alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `start`&mdash;Uses the start point of the container.
     * - `center`&mdash;Uses the center point of the container.
     * - `end`&mdash;Uses the end point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the width of the container.
     */
    horizontal?: 'start' | 'center' | 'end' | 'stretch';
    /**
     * Defines the possible vertical alignment of the inner GridLayout elements.
     *
     * The available values are:
     * - `top`&mdash;Uses the top point of the container.
     * - `middle`&mdash;Uses the middle point of the container.
     * - `bottom`&mdash;Uses the bottom point of the container.
     * - (Default)`stretch`&mdash;Stretches the items to fill the height of the container.
     */
    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}