GridLayout
Represents the KendoReact GridLayout component. Arranges the contents of the component in rows and columns in a grid structure.
Definition
Package:@progress/kendo-react-layout
Properties Interface:GridLayoutProps
Syntax:
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
Specifies the horizontal and vertical alignment of the inner GridLayout elements (see example).
The possible keys are:
horizontal—Defines the possible horizontal alignment of the inner GridLayout elements.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.
vertical— Defines the possible vertical alignment of the inner GridLayout elements.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.
Example:
<GridLayout align={{ horizontal: 'center', vertical: 'middle' }} />children?
ReactNode
The React elements that will be rendered inside the GridLayout (see example).
Example:
<GridLayout>
<div>Item 1</div>
<div>Item 2</div>
</GridLayout>className?
string
Sets additional CSS classes to the GridLayout (see example).
Example:
<GridLayout className="custom-class" />Specifies the default number of columns and their widths (see example).
Example:
<GridLayout cols={[{ width: '100px' }, { width: '200px' }]} />Specifies the gaps between the elements (see example).
- The possible keys are:
rowscolumns
Example:
<GridLayout gap={{ rows: '10px', columns: '20px' }} />id?
string
Sets the id property of the root GridLayout element (see example).
Example:
<GridLayout id="grid-layout" />Specifies the default number of rows and their height (see example).
Example:
<GridLayout rows={[{ height: '50px' }, { height: '100px' }]} />style?
CSSProperties
Sets additional CSS styles to the GridLayout (see example).
Example:
<GridLayout style={{ gap: '10px' }} />References
Represents the Object which is passed to the ref
callback of the GridLayout component.