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

# Grid

`Grid` is a component for managing grid layouts. It also comes with handy style shorthand.

```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" \| AnyString \| 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" \| AnyString ...` | 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" \| AnyString \| number & {} ...`        | The CSS `grid-column` property.            |
| `row`             | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| number & {} ...`        | The CSS `grid-row` property.               |
| `templateAreas`   | -       | `"-moz-initial" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "unset" \| AnyString ...`                       | 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" \| AnyString \| number & {} ...` | The CSS `grid-area` property.                      |
| `colEnd`      | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| 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" \| AnyString \| number & {} ...` | The CSS `grid-column-start` property.              |
| `rowEnd`      | -       | `"-moz-initial" \| "auto" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| AnyString \| 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" \| AnyString \| number & {} ...` | The CSS `grid-row-start` property.                 |

## Similar Components

- [Bleed](https://yamada-ui.com/docs/components/bleed.md): `Bleed` is a component used to extend elements beyond the boundaries of a container.
- [Box](https://yamada-ui.com/docs/components/box.md): `Box` is the most abstract component on which all other components are built. By default, it renders a `div` element.
- [Center](https://yamada-ui.com/docs/components/center.md): `Center` is a component that aligns the child elements in the center within the component.
- [Container](https://yamada-ui.com/docs/components/container.md): `Container` is a component used as a general division element. By default, it renders the `section` element.
- [Flex](https://yamada-ui.com/docs/components/flex.md): `Flex` is a component that sets `flex` to `Box`. Also, convenient style shorthand is available.
- [Float](https://yamada-ui.com/docs/components/float.md): `Float` is a component used to fix elements to the edges of a container.
- [Group](https://yamada-ui.com/docs/components/group.md): `Group` is a component that groups and attaches multiple elements together.
- [HStack](https://yamada-ui.com/docs/components/h-stack.md): `HStack` is used to stack child elements horizontally.

## Used By Components & Hooks

- [ColorSwatch](https://yamada-ui.com/docs/components/color-swatch.md): `ColorSwatch` is a component that displays color samples.
- [SimpleGrid](https://yamada-ui.com/docs/components/simple-grid.md): `SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.