グリッドGridExperimental

列数、間隔、最小幅を指定して、カードやメディアを整列する CSS grid ラッパーです。

プレビュー

状態とバリエーション

固定列

カード数や表示幅が決まっている領域では、列数を明示します。

1
2
3
4
5
6

幅に応じて列数を変える

親幅に合わせて列数を変えるカード一覧では、最小セル幅を指定します。

監査
デザイン
確認
公開
レポート

12列レイアウト

子要素側の col-span と組み合わせて、メイン領域と補助領域の比率を調整します。

メインパネル

デスクトップでは8列分を使います。

指標A
指標B
指標C
指標D

余白の密度

同じセル幅でも、gap の違いで一覧の密度を変えられます。

密 1
密 2
密 3
密 4
広 1
広 2
広 3
広 4

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
colsColCount | { base?, sm?, md?, lg?, xl? }3列数。固定数（cols={3}）は全幅で N 列固定のため狭い画面で溢れます。モバイル対応はレスポンシブ指定（cols={{ base: 1, md: 3 }}）か minItemWidth を。minItemWidth 指定時は無視されます。
minItemWidthnumber-auto-fit の最小セル幅です。幅に応じて列数が変わります。
gap0 | 1 | 2 | 3 | 4 | 5 | 6 | 84セル同士の余白です。
classNamestring-追加の className です。

使い方

import { Grid } from "@gunjo/ui";

const cards = [
  { title: "概要", meta: "ワークスペースの状況" },
  { title: "売上", meta: "128,400円" },
  { title: "ユーザー", meta: "12,840人が利用中" },
  { title: "タスク", meta: "24件が未完了" },
  { title: "通知", meta: "3件の確認待ち" },
  { title: "設定", meta: "チームポリシー" },
];

export function DashboardGrid() {
  return (
    <Grid minItemWidth={180} gap={3} className="w-full">
      {cards.map((card) => (
        <section key={card.title} className="rounded-md border bg-card p-4">
          <h3 className="font-medium">{card.title}</h3>
          <p className="mt-1 text-sm text-muted-foreground">{card.meta}</p>
        </section>
      ))}
    </Grid>
  );
}

使用コンポーネント

Grid

関連コンポーネント

ContainerClusterCardAssetGrid