SimpleGrid

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

Import

import { SimpleGrid, GridItem } from "@yamada-ui/react"

Copied!

Usage

SimpleGrid internally uses Grid and is a simplified component of Grid.

Editable example

<SimpleGrid w="full" columns={{ base: 2, md: 1 }} gap="md">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <GridItem key={index} w="full" h="4xs" rounded="md" bg={bg} />
    )}
  </For>
</SimpleGrid>

Copied!

Setting the Minimum Width for Children

To set the minimum width for child elements, specify the width in minChildWidth.

For example, if you specify 120px, the CSS property gridTemplateColumns will be repeat(auto-fit, minmax(120px, 1fr)).

Editable example

<SimpleGrid w="full" minChildWidth={{ base: "3xs", lg: 100 }} gap="md">
  <For each={["primary", "secondary", "warning", "danger"]}>
    {(bg, index) => (
      <GridItem key={index} w="full" h="4xs" rounded="md" bg={bg} />
    )}
  </For>
</SimpleGrid>

Copied!

Edit this page on GitHub

PreviousGrid NextSpacer