Grid

Grid is a layout component that allows you to create a grid layout.

import { Grid } from "rizzui";

Default

The default style of Grid component.

01

02

03

import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid columns="3">
      <Grid.Col className="...">01</Grid.Col>
      <Grid.Col className="...">02</Grid.Col>
      <Grid.Col className="...">03</Grid.Col>
    </Grid>
  );
}

With Justify & Align

The style of Grid component can be changed with property justify & align.

01

02

03

import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid
      align="center" // "center" | "end" | "start" | "stretch" | "baseline"
      justify="center" // "center" | "end" | "start" | "stretch" | "around" | "normal" | "evenly" | "between"
      className="grid-cols-[96px_96px_96px]"
    >
      <Grid.Col className="...">01</Grid.Col>
      <Grid.Col className="...">02</Grid.Col>
      <Grid.Col className="...">03</Grid.Col>
    </Grid>
  );
}

With Spanning Columns

The style of Grid.Col component can be changed with property colSpan.

01

02

03

import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid
      columns="4" // "3" | "1" | "2" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none" | "subgrid"
    >
      <Grid.Col className="...">01</Grid.Col>
      <Grid.Col colSpan="2" className="...">
        02
      </Grid.Col>
      <Grid.Col className="...">03</Grid.Col>
    </Grid>
  );
}

With Start & End Columns

The style of Grid.Col component can be changed with property colStart & colEnd.

01

02

03

04

05

06

07

08

import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid columns="6" className="w-full">
      <Grid.Col className="...">01</Grid.Col>
      <Grid.Col colStart="2" colSpan="4" className="...">
        02
      </Grid.Col>
      <Grid.Col className="...">03</Grid.Col>
      <Grid.Col colStart="1" colEnd="3" className="...">
        04
      </Grid.Col>
      <Grid.Col className="...">05</Grid.Col>
      <Grid.Col className="...">06</Grid.Col>
      <Grid.Col colEnd="7" colSpan="2" className="...">
        07
      </Grid.Col>
      <Grid.Col colStart="1" colEnd="7" className="...">
        08
      </Grid.Col>
    </Grid>
  );
}

With Spanning Rows

The style of Grid.Col component can be changed with property rowSpan.

01

02

03

import { Grid } from "rizzui";

export default function App() {
  return (
    <Grid rows="3" className="grid-flow-col">
      <Grid.Col rowSpan="3" className="...">
        01
      </Grid.Col>
      <Grid.Col colSpan="2" className="...">
        02
      </Grid.Col>
      <Grid.Col rowSpan="2" colSpan="2" className="...">
        03
      </Grid.Col>
    </Grid>
  );
}

API Reference

---

Grid Props

Here is the API documentation of the Grid component. And the rest of the props are the same as the original html element. You can use props like id, title, onClick etc.

Props	Type	Description	Default
as	div or any html element	Render as	"div"
columns	Columns Type	Defines columns in a grid	__
rows	Rows Type	Defines rows in a grid	__
justify	Justify Type	Changes the position of grid column items	__
align	Align Type	Changes the position of grid column items	__
gap	Gap Type	Defines the gap between columns in a grid	"4"
placeContent	Place Content Type	Defines the content placements in a grid	__
placeItems	Place Items Type	Defines the content position in a grid	__
children	React.ReactNode	Accepts everything React can render	__
className	string	Add custom classes to the component	__

Grid Col Props

Here is the API documentation of the Grid.Col component. And the rest of the props are the same as the original html element. You can use props like id, title, onClick etc.

Props	Type	Description	Default
as	div or any html element	Render as	"div"
colStart	Column Start Type	Defines the start position of column	__
colEnd	Column End Type	Defines the end position of column	__
colSpan	Column Span Type	Defines size of the column	__
order	Order Type	Defines the order of the column	__
rowStart	Row Start Type	Defines the start position of row	__
rowEnd	Row End Type	Defines the end position of row	__
rowSpan	Row Span Type	Defines size of the row	__
placeSelf	Place Self Type	Defines the position of item inside the item area of grid	__

Columns Type

type ColumnsType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto"
  | "full";

Rows Type

type RowsType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto"
  | "full";

Justify Type

type JustifyType =
  | "start"
  | "end"
  | "center"
  | "between"
  | "around"
  | "evenly"
  | "stretch";

Align Type

type AlignType =
  | "start"
  | "end"
  | "center"
  | "between"
  | "around"
  | "evenly"
  | "stretch";

Gap Type

type GapType =
  | "0"
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "12";

Place Content Type

type PlaceContentType =
  | "center"
  | "start"
  | "end"
  | "between"
  | "around"
  | "evenly"
  | "stretch";

Place Items Type

type PlaceItemsType = "center" | "start" | "end" | "stretch";

Column Start Type

type ColumnStartType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto";

Column End Type

type ColumnEndType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto";

Column Span Type

type ColumnSpanType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "auto"
  | "full";

Order Type

type OrderType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "first"
  | "last"
  | "none";

Row Start Type

type RowStartType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto";

Row End Type

type RowEndType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "13"
  | "auto";

Row Span Type

type RowSpanType =
  | "1"
  | "2"
  | "3"
  | "4"
  | "5"
  | "6"
  | "7"
  | "8"
  | "9"
  | "10"
  | "11"
  | "12"
  | "auto"
  | "full";

Place Self Type

type PlaceSelfType = "center" | "auto" | "start" | "end" | "stretch";