GridLayout

Represents the KendoReact GridLayout component. Arranges the contents of the component in rows and columns in a grid structure.

A Functional Component.

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>
  );
};
   ReactDOM.render(<App />, document.querySelector('my-app'));

Name	Type	Default	Description
props	GridLayoutProps intersected with RefAttributes<undefined>		The props of the GridLayout component.