cols="auto-fill" / "auto-fit" のとき、minItemSizeで各セルの最小幅を指定するとグリッドがレスポンシブにリフローする。
children?ReactNodecols?1|2|3|4|5|6|'auto-fill'|'auto-fit''auto-fill'gap?GapSize'md'minItemSize?24|32|40|48|648048| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
cols? | 1|2|3|4|5|6|'auto-fill'|'auto-fit' | 'auto-fill' |
gap? | GapSize | 'md' |
minItemSize? | 24|32|40|48|64|80 | 48 |
型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>
import { Grid } from '@k8ordo/ui';<Grid cols={3} gap="md">
{items.map((label) => <Card>{label}</Card>)}
</Grid><Grid cols={2} gap="sm">…</Grid>
<Grid cols={4} gap="sm">…</Grid><Grid cols="auto-fill" minItemSize={32} gap="md">…</Grid>