Grid Layout

Grid Layout is a component that arranges your components in a grid of size 12 and provides powerful features like auto adjustment, width and height spanning, and re-positioning of K2 widgets. It uses react-grid-layout by STRML as an underlying library and abstracts out its complexity.

Live Editor

Usage

1 . Import GridLayout and Card after installation

import { GridLayout, Card } from "@k2/ui";

2 . Then use in jsx/tsx as shown below:

<GridLayout rowHeight={100} isResponsive={false} width="400px">

<Card widthUnits={2} title="Card Component">

<div>1</div>

</Card>

<Card heightUnits={2} title="Card Component">

<div>2</div>

</Card>

<Card widthUnits={2} title="Card Component">

<div>3</div>

</Card>

</GridLayout>

Examples

2D Layout With Draggable Cards: Demo

<GridLayout

rowHeight={100}

width="400px"

isResizable={false}

isResponsive={false}

>

<Card widthUnits={2} title="Card Component">

<div>1</div>

</Card>

<Card heightUnits={2} title="Card Component">

<div>2</div>

</Card>

<Card title="Card Component">

<div>3</div>

</Card>

<Card title="Card Component">

<div>4</div>

</Card>

</GridLayout>

1D Layout without using Cards: Demo

const StatelessWrapper = ({

value,

color,

}: {

value: number,

widthUnits?: number,

color: string,

}) => (

<div style={{ backgroundColor: color, textAlign: "center" }}>{value}</div>

);

<GridLayout

rowHeight={100}

width="400px"

isResponsive={false}

isDraggable={false}

>

<StatelessWrapper color="yellow" value={1} />

<StatelessWrapper color="orange" widthUnits={2} value={2} />

</GridLayout>;

Click here for more variations of grid layout.

Props

Property	Type	Required	Default value	Description
noOfCols	number	no	3	No of columns in Grid.
rowHeight	number	no	8	Height of a row in pixels.
rowOffsets	number[]	no	[]	If some child content has custom height, it may disturb the row positioning, you may pass offsets to adjust that.
isResponsive	boolean	no	true	Make this true to make the grid layout adjust it's layout when the passed width updates. Note that the it automatically updates on window resize regardless of this prop. So this should only be used for other cases due to performance reasons.
isResizable	boolean	no	true	Enable to make grid resizeable.
isDraggable	boolean	no	true	Make this true to enable Grid items to be draggable.
draggableHandle	string	no	None	A CSS selector for tags that will act as the draggable handle. For example: draggableHandle:'.MyDragHandleClassName'. If you forget the leading . it will not work.
gridGap	[number,number]	no	[10, 10]	X and Y margin of grid items.
width	string | number	no	100%	Width of grid container.
style	CSSProperties	no	{}	Styles applied to the root element of grid.
className	string	no	{}	Class applied to the root element of grid.

Please see Class Specificity for correctly defining it.