SimpleGrid
SimpleGridは、Gridをより使いやすくシンプルにしたコンポーネントです。
インポート
import { SimpleGrid, GridItem } from "@yamada-ui/react"
使い方
SimpleGridは、内部的にGridを使用しており、Gridを簡素化したコンポーネントです。
編集可能な例
<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>
子要素の最小幅を設定する
子要素の最小幅を設定する場合は、minChildWidthに横幅を設定します。
例えば、120pxを指定した場合、CSSプロパティのgridTemplateColumnsは、repeat(auto-fit, minmax(120px, 1fr))になります。
編集可能な例
<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>
GitHubでこのページを編集する