kaze風
Grid
レスポンシブ対応のグリッドレイアウト。ブレイクポイントごとのカラム数を prop で制御。
プレビュー
1
2
3
4
5
6
使いどころ
使う場面
- カード、指標、画像など、同じ種類の要素を等幅の列で並べる
- columns（デスクトップ）、columnsMd（1024px 以下）、columnsSm（640px 以下）で画面幅ごとの列数を決める。スマホは 1 列にするのが基本
- 余白は gap に "sm" "md" "lg" のような意味の名前か、space トークンの数値を渡す
使わない場面
- マーケティングの特長紹介や料金の並び。FeatureGrid や PricingGrid が専用の見た目を持っている
- 行と列の見出しがあるデータ。Table を使う
- 要素が 1 列に縦積みされるだけの場面。Grid でなくスタック用のユーティリティで足りる
使い方
<Grid columns={3} columnsMd={2} columnsSm={1}>
<Card>...</Card>
<Card>...</Card>
<Card>...</Card>
</Grid>
<Grid columns={4} columnsSm={2} gap="var(--space-4)">
{items.map(item => <Card key={item.id}>...</Card>)}
</Grid>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
columns | 1 | 2 | 3 | 4 | 5 | 6 | 3 | デスクトップ時のカラム数 |
columnsMd | 1 | 2 | 3 | 4 | 5 | 6 | なし | ≤1024px 時のカラム数（省略時は columns を継承） |
columnsSm | 1 | 2 | 3 | 4 | 5 | 6 | なし | ≤640px 時のカラム数（省略時は columnsMd を継承） |
gap | "xs" | "sm" | "md" | "lg" | "xl" | SpaceToken | number | (string & {}) | var(--space-6) | アイテム間のギャップ（space トークン/数値/CSS値） |
gapMd | "xs" | "sm" | "md" | "lg" | "xl" | SpaceToken | number | (string & {}) | なし | 1024px 以下での間隔。未指定なら gap |
gapSm | "xs" | "sm" | "md" | "lg" | "xl" | SpaceToken | number | (string & {}) | なし | 640px 以下での間隔。未指定なら gapMd、それもなければ gap |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- 出力は <div> で、役割は付かない。並び順がそのまま読み上げ順になるので、見た目で並び替えず DOM の順を意味どおりにする
- 項目の集まりであることを伝えたいときは、子に List を使うか、利用側で role を足す