---
title: SimpleGrid
description: "`SimpleGrid`は、`Grid`をより使いやすくシンプルにしたコンポーネントです。"
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
---

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

## 使い方

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

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

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

```tsx
<SimpleGrid />
```

### 間隔を調整する

間隔を調整する場合は、`gap`、`rowGap`、`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>
```

### 子要素の幅を調整する

子要素の幅を調整する場合は、`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" \| 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.                                                                                                       |
| `columns`         | -       | `number`                                                                                                                                                                                                        | The number of columns.                                                                                                                |
| `minChildWidth`   | -       | `"-moz-fit-content" \| "-moz-initial" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-fill-available" \| "-webkit-fit-content" \| "-webkit-max-content" \| "-webkit-min-content" \| "0.5" \| "1.5" ...` | 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" \| 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.                                                                                                |