---
title: SimpleGrid
description: "`SimpleGrid` is a component that makes `Grid` simpler and more user-friendly."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/simple-grid/simple-grid.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/simple-grid
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-simplegrid--basic
---

# SimpleGrid

`SimpleGrid` is a component that makes `Grid` simpler and more user-friendly.

```tsx
<SimpleGrid columns={2} gap="md" w="full">
  <For each={Array.from({ length: 4 })}>
    {(_, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        p="md"
        textAlign="center"
      >
        GridItem
      </GridItem>
    )}
  </For>
</SimpleGrid>
```

## Usage

```tsx
import { SimpleGrid } from "@yamada-ui/react"
```

```tsx
import { SimpleGrid } from "@/components/ui"
```

```tsx
import { SimpleGrid } from "@workspaces/ui"
```

```tsx
<SimpleGrid />
```

### Adjusting gaps

To adjust gaps, pass values to `gap`, `rowGap`, and `columnGap`.

```tsx
<SimpleGrid columns={2} columnGap="lg" rowGap="sm" w="full">
  <For each={Array.from({ length: 4 })}>
    {(_, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        p="md"
        textAlign="center"
      >
        GridItem
      </GridItem>
    )}
  </For>
</SimpleGrid>
```

### Adjusting child width

To adjust the width of child elements, pass a value to `minChildWidth`.

```tsx
<SimpleGrid gap="md" minChildWidth={{ base: "3xs", md: "8rem" }} w="full">
  <For each={Array.from({ length: 4 })}>
    {(_, index) => (
      <GridItem
        key={index}
        bg="bg.contrast"
        color="fg.contrast"
        p="md"
        textAlign="center"
      >
        GridItem
      </GridItem>
    )}
  </For>
</SimpleGrid>
```

## Props

| 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.                                                                                                       |
| `columns`         | -       | `number`                                                                                                                                                                                   | The number of columns.                                                                                                                |
| `minChildWidth`   | -       | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fit-content" \| "-webkit-max-content" \| "-webkit-min-content" \| "0.5" \| "1.5" \| "1" ...` | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. |
| `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.                                                                                                |

## 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.
- [Grid](https://yamada-ui.com/docs/components/grid.md): `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.
- [Group](https://yamada-ui.com/docs/components/group.md): `Group` is a component that groups and attaches multiple elements together.

## Uses Components & Hooks

- [Grid](https://yamada-ui.com/docs/components/grid.md): `Grid` is a component for managing grid layouts. It also comes with handy style shorthand.