CSS Grid生成ツール
列数・行数・gapと各トラックのサイズ（fr/px/auto）を指定すると、CSS Gridのコードをリアルタイムプレビューで生成します。
px
px
各トラックの単位（fr / px / auto）と数値を指定できます。
CSS
HTML
使い方
1
列数・行数を指定
作りたいグリッドの列数と行数を入力します。プレビューが即座に更新されます。
2
トラックサイズとgapを調整
各列・各行のサイズ（fr / px / auto）と、列・行の間隔（gap）をお好みに合わせて設定します。
3
プレビューを確認
生成されるグリッドのレイアウトをリアルタイムプレビューで確認できます。
4
CSSをコピーして使用
生成されたCSS（とHTML）をコピーボタンでコピーし、そのままプロジェクトに貼り付けて使用します。
CSS Grid生成とは
CSS Grid Layoutのコードを視覚的に生成するWebツールです。列数・行数・各トラックのサイズ・gapを指定するだけで、display: grid; grid-template-columns / grid-template-rows; gap を含むCSSコードを自動生成します。すべての処理はブラウザ内で完結し、入力内容はサーバーに送信されません。
機能・特徴
- リアルタイムプレビュー列数・行数・サイズ・gapの変更が即座にプレビューへ反映。完成イメージを見ながら調整できます。
- 柔軟なトラック指定各トラックを fr（比率）・px（固定）・auto から自由に選択。複雑なレイアウトにも対応します。
- CSS＋HTMLを出力grid-template-columns / rows と gap を含むCSSに加え、対応するHTML雛形も同時に生成します。
- プライバシー保護すべての処理はブラウザ内で完結。入力データはサーバーに送信されません。
活用シーン
- カードギャラリーや商品一覧のレイアウト作成
- ダッシュボードや管理画面のグリッド設計
- レスポンシブなページレイアウトの試作
- CSS Gridの学習・grid-template-columnsの理解
- フォームやギャラリーの整列レイアウト
よくある質問
CSS Grid生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
frとpxとautoの違いは何ですか？
fr（fraction）は利用可能なスペースを比率で分配する単位、pxは固定ピクセル幅、autoは内容に応じて自動調整されるサイズです。1fr 2fr のように指定すると、1:2の比率で列幅が分配されます。
生成したCSSはそのまま使えますか？
はい、コピーボタンでCSSをクリップボードにコピーし、そのままCSSファイルに貼り付けてご利用いただけます。対応するHTMLの雛形も同時に出力されます。
CSS Gridはどのブラウザで動きますか？
Chrome、Firefox、Safari、Edgeなど2026年現在の主要ブラウザはすべてCSS Grid Layoutに対応しています。IE11は一部の旧仕様のみのため、最新のグリッド構文は非対応です。
入力したデータは保存されますか？
いいえ、入力された内容はサーバーに送信・保存されません。すべての処理はお使いのブラウザ内で完結するため、安心してご利用いただけます。