---
sidebar_position: 1
---

import { Grid } from "rizzui";
import Paper from "@site/src/components/paper";

# Grid

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

```tsx
import { Grid } from "rizzui";
```

<div className="mb-20" />

## Default

The default style of **Grid** component.

<Paper>
  <Grid columns="3">
    <Grid.Col className="border border-muted rounded-md size-40 text-3xl font-semibold flex justify-center items-center shadow">
      01
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md size-40 text-3xl font-semibold flex justify-center items-center shadow">
      02
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md size-40 text-3xl font-semibold flex justify-center items-center shadow">
      03
    </Grid.Col>
  </Grid>
</Paper>

```tsx
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>
  );
}
```

<div className="mb-20" />

## With Justify & Align

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

<Paper>
  <Grid align="center" justify="center" className="grid-cols-[96px_96px_96px]">
    <Grid.Col className="border border-muted rounded-md min-h-16 text-2xl font-semibold flex justify-center items-center shadow">
      01
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-h-20 text-2xl font-semibold flex justify-center items-center shadow">
      02
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-h-24 text-2xl font-semibold flex justify-center items-center shadow">
      03
    </Grid.Col>
  </Grid>
</Paper>

```tsx
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>
  );
}
```

<div className="mb-20" />

## With Spanning Columns

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

<Paper>
  <Grid columns="4">
    <Grid.Col className="border border-muted rounded-md min-w-40 h-24 text-3xl font-semibold flex justify-center items-center shadow">
      01
    </Grid.Col>
    <Grid.Col
      colSpan="2"
      className="border border-muted rounded-md min-w-40 h-24 text-3xl font-semibold flex justify-center items-center shadow"
    >
      02
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-w-40 h-24 text-3xl font-semibold flex justify-center items-center shadow">
      03
    </Grid.Col>
  </Grid>
</Paper>

```tsx
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>
  );
}
```

<div className="mb-20" />

## With Start & End Columns

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

<Paper>
  <Grid columns="6" className="w-full">
    <Grid.Col className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow">
      01
    </Grid.Col>
    <Grid.Col
      colStart="2"
      colSpan="4"
      className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow"
    >
      02
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow">
      03
    </Grid.Col>
    <Grid.Col
      colStart="1"
      colEnd="3"
      className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow"
    >
      04
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow">
      05
    </Grid.Col>
    <Grid.Col className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow">
      06
    </Grid.Col>
    <Grid.Col
      colEnd="7"
      colSpan="2"
      className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow"
    >
      07
    </Grid.Col>
    <Grid.Col
      colStart="1"
      colEnd="7"
      className="border border-muted rounded-md min-h-24 text-3xl font-semibold flex justify-center items-center shadow"
    >
      08
    </Grid.Col>
  </Grid>
</Paper>

```tsx
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>
  );
}
```

<div className="mb-20" />

## With Spanning Rows

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

<Paper>
  <Grid rows="3" className="grid-flow-col">
    <Grid.Col
      rowSpan="3"
      className="border border-muted rounded-md min-w-40 py-6 text-3xl font-semibold flex justify-center items-center shadow"
    >
      01
    </Grid.Col>
    <Grid.Col
      colSpan="2"
      className="border border-muted rounded-md min-w-40 py-6 text-3xl font-semibold flex justify-center items-center shadow"
    >
      02
    </Grid.Col>
    <Grid.Col
      rowSpan="2"
      colSpan="2"
      className="border border-muted rounded-md min-w-40 text-3xl font-semibold flex justify-center items-center shadow"
    >
      03
    </Grid.Col>
  </Grid>
</Paper>

```tsx
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>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### 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.

<div className="mb-20 overflow-x-auto grid-props-table-row-highlight">

|    Props     |                     Type                      |                Description                | Default |
| :----------: | :-------------------------------------------: | :---------------------------------------: | :-----: |
|      as      |           `div` or any html element           |                 Render as                 | `"div"` |
|   columns    |       [**Columns Type**](#columns-type)       |         Defines columns in a grid         |  \_\_   |
|     rows     |          [**Rows Type**](#rows-type)          |          Defines rows in a grid           |  \_\_   |
|   justify    |       [**Justify Type**](#justify-type)       | Changes the position of grid column items |  \_\_   |
|    align     |         [**Align Type**](#align-type)         | Changes the position of grid column items |  \_\_   |
|     gap      |           [**Gap Type**](#gap-type)           | Defines the gap between columns in a grid |  `"4"`  |
| placeContent | [**Place Content Type**](#place-content-type) | Defines the content placements in a grid  |  \_\_   |
|  placeItems  |   [**Place Items Type**](#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    |  \_\_   |

</div>

### 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.

<div className="overflow-x-auto">

|   Props   |                    Type                     |                        Description                        | Default |
| :-------: | :-----------------------------------------: | :-------------------------------------------------------: | :-----: |
|    as     |          `div` or any html element          |                         Render as                         | `"div"` |
| colStart  | [**Column Start Type**](#column-start-type) |           Defines the start position of column            |  \_\_   |
|  colEnd   |   [**Column End Type**](#column-end-type)   |            Defines the end position of column             |  \_\_   |
|  colSpan  |  [**Column Span Type**](#column-span-type)  |                Defines size of the column                 |  \_\_   |
|   order   |        [**Order Type**](#order-type)        |              Defines the order of the column              |  \_\_   |
| rowStart  |    [**Row Start Type**](#row-start-type)    |             Defines the start position of row             |  \_\_   |
|  rowEnd   |      [**Row End Type**](#row-end-type)      |              Defines the end position of row              |  \_\_   |
|  rowSpan  |     [**Row Span Type**](#row-span-type)     |                  Defines size of the row                  |  \_\_   |
| placeSelf |   [**Place Self Type**](#place-self-type)   | Defines the position of item inside the item area of grid |  \_\_   |

</div>

<div className="my-10 straight-token-line">

### Columns Type

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

</div>

<div className="mb-10 straight-token-line">

### Rows Type

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

</div>

### Justify Type

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

<div className="mb-10" />

### Align Type

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

<div className="mb-10" />

### Gap Type

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

<div className="mb-10" />

### Place Content Type

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

<div className="mb-10" />

### Place Items Type

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

<div className="mb-10 straight-token-line">

### Column Start Type

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

</div>

<div className="mb-10 straight-token-line">

### Column End Type

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

</div>

<div className="mb-10 straight-token-line">

### Column Span Type

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

</div>

<div className="mb-10 straight-token-line">

### Order Type

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

</div>

<div className="mb-10 straight-token-line">

### Row Start Type

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

</div>

<div className="mb-10 straight-token-line">

### Row End Type

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

</div>

<div className="mb-10 straight-token-line">

### Row Span Type

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

</div>

### Place Self Type

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