New to KendoReact? Start a free 30-day trial

GridLayoutItem

Component

Represents the KendoReact GridLayoutItem component.

Definition

Package:@progress/kendo-react-layout

Properties Interface:GridLayoutItemProps

Syntax:

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>
  );
};

Properties

children?

ReactNode

The React elements that will be rendered inside the GridLayoutItem (see example).

Example:

jsx

<GridLayoutItem>Content</GridLayoutItem>

className?

string

Sets additional CSS classes to the GridLayoutItem (see example).

Example:

jsx

<GridLayoutItem className="custom-class" />

col?

number

Defines the column line from which the element will start (see example).

Example:

jsx

<GridLayoutItem col={1} />

colSpan?

number

Specifies the number of columns over which the element will span (see example). Defaults to 1.

Example:

jsx

<GridLayoutItem colSpan={2} />

id?

string

Sets the id property of the root GridLayoutItem element (see example).

Example:

jsx

<GridLayoutItem id="item-1" />

row?

number

Defines the row line from which the element will start (see example).

Example:

jsx

<GridLayoutItem row={1} />

rowSpan?

number

Specifies the number of rows over which the element will span (see example). Defaults to 1.

Example:

jsx

<GridLayoutItem rowSpan={2} />

style?

CSSProperties

Sets additional CSS styles to the GridLayoutItem (see example).

Example:

jsx

<GridLayoutItem style={{ backgroundColor: 'red' }} />

References

ref

GridLayoutItemHandle

Represents the Object which is passed to the ref callback of the GridLayoutItem component.