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