Grid設定
grid-template-columns
grid-template-rows
プレビュー
生成コード
CSS Gridジェネレーターとは？
CSS Grid Layout は、Webページの2次元レイアウトを実現するCSSの仕様です。行と列を同時に制御でき、複雑なレイアウトもシンプルなコードで構築できます。
本ツールは、カラム数・行数・gap・各トラックのサイズを設定するだけで、CSS GridのコードとHTMLテンプレートをリアルタイムで自動生成します。ビジュアルプレビューで確認しながら調整できるため、コードを手書きするよりも効率的です。
CSS Grid と Flexbox の使い分け
CSS Gridは「2次元（行×列）」のレイアウト、Flexboxは「1次元（行または列）」のレイアウトに最適です。両者は競合するものではなく、適材適所で組み合わせるのがベストプラクティスです。
| 特徴 | CSS Grid | Flexbox |
|---|---|---|
| 次元 | 2次元（行と列を同時制御） | 1次元（行または列のどちらか） |
| 適用場面 | ページ全体、カードグリッド、ダッシュボード | ナビゲーション、ボタン並び、単一行の要素配置 |
| サイズ制御 | 明示的にトラックサイズを定義 | コンテンツサイズに基づいて伸縮 |
| 重なり | 可能（grid-area で重ねられる） | 不可 |
よく使う Grid パターン
- 均等カラム —
grid-template-columns: repeat(3, 1fr)で3等分レイアウト - レスポンシブカード —
repeat(auto-fill, minmax(280px, 1fr))で自動折り返し - サイドバー + メイン —
240px 1frで固定幅サイドバー - Holy Grail —
grid-template: "header header" auto "nav main" 1fr "footer footer" auto / 200px 1fr
fr 単位とは
fr（fraction）はGrid専用の単位で、余白スペースを比率で分配します。例えば 1fr 2fr は空きスペースを1:2で分け合います。px や % と組み合わせることで、固定幅と可変幅を柔軟にミックスできます。
ブラウザ完結で安全に使えます
本ツールはすべての処理をブラウザ内の JavaScript だけで完結しています。入力されたデータが外部サーバーに送信されることは一切ありません。社内プロジェクトのレイアウト設計にも安心してお使いいただけます。
- 外部APIへの通信なし — オフライン環境でも動作します
- データの保存・送信なし — ページを閉じれば入力内容は完全に消えます
- アカウント登録不要 — URLを開くだけで誰でもすぐに使えます
その他のツール
お探しのツールが見つからない場合は、BetaVersion Tools トップページから全ツールの一覧をご確認ください。広告運用・Web制作に役立つツールを随時追加しています。