行数 × 列数
3 × 3
テンプレート
repeat(3, 1fr)
デザインツール
CSS Grid ジェネレーター - 行、列、gap
列数、行数、gap を設定し、基本的な display:grid レイアウトを生成できます。track 構造をプレビューし、簡易テンプレートを試しながら、管理画面レイアウトやカードグリッド向けの CSS / HTML をコピーできます。
CSSGridLayout
クイック切替:Flexbox ジェネレーター
このツールをお気に入りに
お気に入りの保存方法がまだ選ばれていません。
クイック操作
このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。
设计配色
CSS Grid ジェネレーター
3
3
3 × 3 网格
.grid {
display: grid;
} 利用シーン
- 等幅カラムのカードグリッドを下書きする
- 管理画面ページのグリッド構成を作る
- 列数と gap の値を素早く確認する
使い方
- columns、rows、gaps を設定する
- グリッド構造をプレビューする
- 生成された CSS または HTML をコピーする
入出力サンプル
FAQ
named grid areas に対応していますか？
主に基本的な track 設定（多くは等しい 1fr track）を対象にしています。複雑な grid-area マップは手書き CSS が必要です。
ツール
関連ツール
近い用途の翻訳済みツールへ続けて進めます。
Flexbox ジェネレーター
Flexbox ジェネレーター - 1 次元レイアウトの視覚調整
flex-direction、justify-content、align-items、wrap、gap をライブプレビュー付きで調整できます。box の追加・削除で折り返しや余白を確認し、生成された CSS と HTML scaffold をそのままプロジェクトへ持ち込めます。
Design CSS Layout