---
title: Grid
description: "`Grid` is a component for managing grid layouts. It also comes with handy style shorthand."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/grid/grid.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/grid
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-grid--basic
---

```tsx
<Grid gap="md" templateColumns="repeat(4, 1fr)">
  <For each={Array.from({ length: 4 })}>
    {(_, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        minH="16"
        h="full"
      />
    )}
  </For>
</Grid>
```

## Usage

```tsx
import { Grid, GridItem } from "@yamada-ui/react"
```

```tsx
import { Grid, GridItem } from "@/components/ui"
```

```tsx
import { Grid, GridItem } from "@workspaces/ui"
```

```tsx
<Grid>
  <GridItem />
</Grid>
```

### Use Template Areas

```tsx preview
<Grid
  templateAreas={`
    "one one two three"
    "four five two six"
    "four seven seven eight"
  `}
  gap="md"
>
  <For each={["one", "two", "three", "four", "five", "six", "seven", "eight"]}>
    {(area, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        minH="16"
        h="full"
        area={area}
      />
    )}
  </For>
</Grid>
```

### Spanning Multiple Columns and Rows

```tsx
<Grid gap="md" templateColumns="repeat(4, 1fr)" templateRows="repeat(3, 1fr)">
  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colSpan={2}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colSpan={2}
    rowSpan={3}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    rowStart={2}
    rowEnd={4}
  />

  <GridItem
    bg="bg.contrast"
    color="fg.contrast"
    minH="16"
    h="full"
    colStart={2}
    colEnd={3}
    rowStart={2}
    rowEnd={4}
  />
</Grid>
```

## Props

### Grid

| Prop              | Default | Type                                                                                                                      | Description                                |
| ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`              | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`         | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`             | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme`     | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `area`            | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-area` property.              |
| `autoColumns`     | -       | `"-moz-initial" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" \| "1/3" \| "1/4" \| "1/5" \| "1/6" ...`                      | The CSS `grid-auto-columns` property.      |
| `autoFlow`        | -       | `"-moz-initial" \| "column" \| "dense" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "row" \| "unset" ...`   | The CSS `grid-auto-flow` property.         |
| `autoRows`        | -       | `"-moz-initial" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" \| "1/3" \| "1/4" \| "1/5" \| "1/6" ...`                      | The CSS `grid-auto-rows` property.         |
| `column`          | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-column` property.            |
| `row`             | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-row` property.               |
| `templateAreas`   | -       | `"-moz-initial" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "unset" ...`                         | The CSS `grid-template-areas` property.    |
| `templateColumns` | -       | `"-moz-initial" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" \| "1/3" \| "1/4" \| "1/5" \| "1/6" ...`                      | The CSS `grid-template-columns` property.  |
| `templateRows`    | -       | `"-moz-initial" \| "0.5" \| "1.5" \| "1" \| "1/12" \| "1/2" \| "1/3" \| "1/4" \| "1/5" \| "1/6" ...`                      | The CSS `grid-template-rows` property.     |

### GridItem

| Prop          | Default | Type                                                                                                                      | Description                                        |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                        |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.         |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                    |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                        |
| `area`        | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-area` property.                      |
| `colEnd`      | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-column-end` property.                |
| `colSpan`     | -       | `number`                                                                                                                  | The number of columns the grid item should `span`. |
| `colStart`    | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-column-start` property.              |
| `rowEnd`      | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-row-end` property.                   |
| `rowSpan`     | -       | `number`                                                                                                                  | The number of rows the grid item should `span`.    |
| `rowStart`    | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...`          | The CSS `grid-row-start` property.                 |