グリッド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
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| cols | 1 | 2 | 3 | 4 | 5 | 6 | 12 | 3 | 固定列数です。minItemWidth を指定した場合は使われません。 |
| minItemWidth | number | - | auto-fit の最小セル幅です。幅に応じて列数が変わります。 |
| gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 4 | セル同士の余白です。 |
| className | string | - | 追加の className です。 |
使い方
Loading...