Version: 1.2.0

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

You can also provide GridLayoutProps in theme object to keep the layout consistent for multiple grids. However if a prop is passed in the component as well as provided in the theme, the one that is passed in the component will be given preference. Click here to see an example of how you can provide these props in theme object.

Examples

2D Layout With Draggable Cards: Demo

<GridLayout rowHeight={100} width="400px" isResizable={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>

Responsive Grid Layout with Cards Demo

To make the Grid Layout responsive, you can pass the optional breakpoints prop of type Breakpoints to the GridLayout component. You can also specify different number of columns for each breakpoint by passing Breakpoints object in noOfCols prop. Similary, you can pass Breakpoints in Card or any children's heightUnits and widthUnits props. In case if number is passed for either noOfCols, widthUnits or heightUnits, that number value will be used for all breakpoints.

Please note that if breakpoints prop is not passed but the value passed for either noOfCols, widthUnits or heightUnits, is Breakpoints object, grid will not render and an error will be thrown.

Below is an example for making the GridLayout responsive.

<GridLayout
  rowHeight={100}
  isResizable={false}
  breakpoints={{ lg: 1200, md: 786, xs: 480 }}
  noOfCols={{ lg: 12, md: 12, xs: 10 }}
>
  <Card
    className="card-content"
    classes={{
      body: "card-body-custom-padding",
    }}
    widthUnits={{
      lg: 3,
      md: 6,
      xs: 8,
    }}
    title="Card Component"
  >
    <div>1</div>
  </Card>
  <Card
    classes={{
      body: "card-body-custom-padding",
    }}
    className="card-content"
    title="Card Component"
    widthUnits={{
      lg: 3,
      md: 6,
      xs: 8,
    }}
  >
    <div>2</div>
  </Card>
  <Card
    className="card-content"
    classes={{
      body: "card-body-custom-padding",
    }}
    widthUnits={{
      lg: 3,
      md: 6,
      xs: 8,
    }}
    title="Card Component"
  >
    <div>3</div>
  </Card>
  <Card
    classes={{
      body: "card-body-custom-padding",
    }}
    className="card-content"
    title="Card Component"
    widthUnits={{
      lg: 3,
      md: 6,
      xs: 8,
    }}
  >
    <div>4</div>
  </Card>
</GridLayout>

Click here for more variations of grid layout.

Props

Property	Type	Required	Default value	Description
breakpoints	Breakpoints	no	None	Object containing breakpoint key and its pixel value, e.g. `{lg: 1200, md: 996, sm: 768, xs: 480}`. Breakpoint names are arbitrary but must match in the `noOfCols` and children's `widthUnits` and `heightUnits` objects.
noOfCols	number \| Breakpoints	no	3	No of columns in Grid. If used as Breakpoints, the keys must match the breakpoints keys.
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.
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	GridGap	no	[10, 10]	X and Y margin of grid items. Can be specified either as horizontal and vertical margin, e.g. `[10, 10]` or as a breakpoint -> margin map, e.g. `{lg: [10, 10], md: [10, 10], ...}
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.

Custom Types

Breakpoints

Here is the type for Grid's breakpoints and noOfCols.

type Breakpoints = {
  [breakpoint: string]: number;
};

GridGap

Here is the type for Grid's gridGap prop.

type GridGap = [number, number] | { [breakpoint: string]: [number, number] };

Usage#

Examples#

Props#

Custom Types#

Breakpoints#