@progress/kendo-react-layout/gridlayout/GridLayoutItem.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 { GridLayoutItemProps } from './interfaces/GridLayoutItemProps';
import * as React from 'react';
/**
 * Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
 * callback of the GridLayoutItem component.
 */
export interface GridLayoutItemHandle {
    /**
     * Represents the current element. If no current element is present, `element` is `null`.
     */
    element: HTMLDivElement | null;
}
/**
 * Represents the [KendoReact GridLayoutItem component](https://www.telerik.com/kendo-react-ui/components/layout/gridlayout).
 *
 * @example
 * ```jsx
 *
 * const App = () => {
 *   return (
 *     <GridLayout
 *       rows={[{height: 50}, {height: 50}, {height: 50}]}
 *       cols={[{width: 50}, {width: 50}, {width: 50}]}
 *       gap={{rows: 5, cols: 5}}
 *       align={{horizontal: 'stretch', vertical: 'stretch'}}
 *     >
 *       <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
 *       <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
 *       <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
 *       <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
 *       <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
 *     </GridLayout>
 *   );
 * };
 * ```
 */
export declare const GridLayoutItem: React.ForwardRefExoticComponent<GridLayoutItemProps & React.RefAttributes<GridLayoutItemHandle | null>>;