CSS Grid ジェネレーター
CSS Gridレイアウトをビジュアルで作成。列・行・ギャップ・テンプレート値をリアルタイムプレビューで設定し、コードを即時出力。無料・ブラウザ完結。
使い方
- 列数と行数を設定します — プレビューとテンプレート入力が自動更新されます。
- 列ギャップと行ギャップを調整してセル間のガターを制御します。
- grid-template-columnsまたはgrid-template-rowsを任意の値（例：
200px 1fr auto）で上書きできます。 - ライブプレビューが変更を即座に反映します。
- コピーをクリックして生成された
.container { … }ブロックをクリップボードにコピーします。
生成されるCSSについて
ジェネレーターは .container ルールに5つのプロパティを出力します：
display: grid、grid-template-columns、grid-template-rows、
column-gap、row-gap。スタイルシートに貼り付け、
.container を自分のクラス名に変更してください。
よく使われるグリッドパターン
- 等幅列 —
repeat(3, 1fr)で3列等幅レイアウト。 - サイドバーレイアウト —
250px 1frで固定サイドバー＋フレキシブルメインエリア。 - ホーリーグレイル —
200px 1fr 200pxに行定義を加えてヘッダー/フッター固定。 - レスポンシブタイル —
repeat(auto-fill, minmax(180px, 1fr))で任意の画面幅に自動対応。
FAQ
CSS Grid とは何ですか？
CSS Grid はCSSに組み込まれた二次元レイアウトシステムです。行と列を同時に定義し、グリッドコンテナ内に要素を正確に配置できます。ページレベルのレイアウト、カードグリッド、画像ギャラリー、水平・垂直両方の構造が必要なUIに最適です。
grid-template-columns は何をしますか？
grid-template-columns はグリッドの列数とサイズを定義します。ジェネレーターはデフォルトで repeat(N, 1fr) を設定します。これはN列の等幅列で、各列が利用可能なスペースを均等に分配します。200px 1fr 2fr や auto-fill minmax(200px, 1fr) のような任意の値に上書きできます。
column-gap と row-gap の違いは何ですか？
column-gap は列間のスペース、row-gap は行間のスペースを設定し、グリッド内のガターを制御します。gap: row-gap column-gap のショートハンドで一度に設定することもできます。
1fr 単位とは何ですか？
fr は分数単位（fractional unit）で、グリッドコンテナの余剰スペースを比率で分配します。例えば 1fr 2fr 1fr は3列を作り、中央の列が他の2列の2倍の幅になります。レスポンシブグリッドレイアウトで最もよく使われる単位です。
メディアクエリなしでレスポンシブグリッドを作るには？
auto-fill または auto-fit と minmax() を組み合わせます：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))。これにより、最小サイズに収まる限り多くの列を自動生成し、余ったスペースを引き伸ばして埋めます。メディアクエリは不要です。