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">
  <GridItem w="full" h="4xs" rounded="md" bg="primary" />
  <GridItem w="full" h="4xs" rounded="md" bg="secondary" />
  <GridItem w="full" h="4xs" rounded="md" bg="warning" />
  <GridItem w="full" h="4xs" rounded="md" bg="danger" />
</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">
  <GridItem w="full" h="4xs" rounded="md" bg="primary" />
  <GridItem w="full" h="4xs" rounded="md" bg="secondary" />
  <GridItem w="full" h="4xs" rounded="md" bg="warning" />
  <GridItem w="full" h="4xs" rounded="md" bg="danger" />
</SimpleGrid>

Copied!

Edit this page on GitHub

PreviousGrid NextSpacer