CSS Gridプレイグラウンド

CSSグリッドは要素を2次元レイアウトに変換します。コンテナに display: grid を設定し、grid-template-columns と grid-template-rows でカラムと行のトラックを定義すると、ブラウザが各子要素をセルに配置します。例えば、grid-template-columns: repeat(3, 1fr) は3つの等幅カラムを作成し、子要素は左から右・上から下へ流れ込みます。古いフロートやフレックスボックスレイアウトとは異なり、グリッドは行と列を同時にレイアウトするため、1つのコンテナプロパティから両方の軸を制御できます。

コンテナに display: grid を追加し、トラックを記述します。最小限の記述は1行で済みます：display: grid; grid-template-columns: 1fr 1fr; — これで2つの等幅カラムができます。さらに、明示的な行には grid-template-rows、余白には gap、子要素を複数のセルにまたがらせるには grid-column: span 2 を追加できます。grid ショートハンドプロパティで行・列・エリアを1つの宣言にまとめることもできますが、ほとんどの開発者は可読性のために grid-template-columns・gap・alignmentを個別に設定します。このジェネレーターはそれらのルールを自動生成します。

これらはカラムと行の各トラックのサイズを定義します。grid-template-columns: 200px 1fr 1fr は固定200pxの最初のカラムと、残りのスペースを分け合う2つの柔軟なカラムを作ります。grid-template-rows: auto 1fr はコンテンツサイズの最初の行と、残りの高さを埋める2番目の行を設定します。リストの各値が1つのトラックを表し、値の数が明示的なカラムまたは行の数を決定します。このジェネレーターは、トラックを追加・編集するたびに両リストを構築し、ライブプレビューをリアルタイムで更新します。

fr は「フラクション（分数）」単位で余ったスペースを分割します。repeat(3, 1fr) は3つの等幅カラムを作ります。repeat(n, value) はトラックパターンをn回繰り返すショートハンドで、repeat(4, 1fr) は 1fr 1fr 1fr 1fr と同じです。minmax(min, max) はmin以下に縮まずmax以上に広がらないトラックを設定します。minmax(150px, 1fr) はカラムを最低150px幅に保ちながら伸縮を許容します。これらを組み合わせた repeat(auto-fit, minmax(150px, 1fr)) は、コンテナ幅の変化に応じてカラムを自動的に追加・削除するグリッドを実現します。

repeat() と auto-fit（またはauto-fill）、そして minmax() を使ってグリッドを自動リフローさせます：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。各カラムは最低200px幅を保ち、ブラウザはコンテナが許す限り多くのカラムを配置し、狭い画面ではカラム数を減らし、広い画面では増やします。このジェネレーターの「レスポンシブ」モードに切り替えてセルの最小幅を設定し、結果をコピーするだけです。メディアクエリを1行も書かずに、モバイルからデスクトップまで対応するフルードカードグリッドを構築する最もシンプルな方法です。

grid-template-areas を使うと、領域に名前を付けてレイアウトをASCIIアートとして描けます。各子要素に grid-area で名前を付け、grid-template-areas: 'header header' 'sidebar main' 'footer footer' のようにグリッドをマッピングします。名前を複数のセルにわたって繰り返すとその領域がまたがり、ドット（.）はセルを空にします。テンプレートがレイアウトそのものに見えるため、ヘッダー・サイドバー・メイン・フッターといったクラシックなページシェルを構築する最も可読性の高い方法です。「エリア」タブはテンプレートと名前付けした各領域の対応する grid-area ルールを自動生成します。

2×2グリッドには、2カラムと2行を設定します：grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; そして4つのアイテムを配置します。3カラムグリッドには grid-template-columns: repeat(3, 1fr) を使い、アイテムが必要な数の行に流れ込むようにします。このツールではカラム数と行数を設定するだけでプレビューがすぐに更新されます — 入力不要です。ジェネレーターは隣接するトラックが同じサイズの場合に repeat() ショートハンドを自動的に適用します。

12カラムグリッドはBootstrapやFoundationによって広まったデザインの慣習で、ページを12個の等幅カラムに分割します。12は2・3・4・6で割り切れるため採用されています。コンポーネントは任意の整数カラムにまたがれます：ハーフは6、サードは4、クォーターは3です。CSSグリッドでは1行で再現できます：grid-template-columns: repeat(12, 1fr)、そして子要素に grid-column: span 4 を使ってサイズを決めます。カラム数を12に設定すると、Bootstrap依存なしの純粋なCSSでクラシックなフレームワークグリッドが得られます。

グリッドは2次元で行とカラムを同時に制御しますが、フレックスボックスは1次元で、1本の行または列にアイテムを並べます。行と列が揃ったページ全体やカードレイアウト（ダッシュボード、ギャラリー、ページシェル）にはグリッドを選びましょう。ナビゲーションバー、ツールバー、ボタンの並びなど1列のコンテンツにはフレックスボックスを選びましょう。両者は相性が良く、ページ外側の構造にはグリッド、個別のセル内にはフレックスボックスという組み合わせが効果的です。

Tailwindにはグリッドユーティリティが揃っています：3つの等幅カラムには grid と grid-cols-3、余白には gap-4、子要素をまたがらせるには col-span-2 / row-span-2 を追加します。grid-cols-3 は repeat(3, minmax(0, 1fr)) にコンパイルされます。レスポンシブなauto-fitトラックのようなカスタム設定には任意の値を使います：grid-cols-[repeat(auto-fit,minmax(150px,1fr))]。出力を「Tailwind」タブに切り替えると、このジェネレーターがコンテナと全アイテムの正確なユーティリティクラスを生成するので、JSXやHTMLマークアップにそのままペーストできます。

子要素に grid-column と grid-row を使用します。grid-column: span 2 はアイテムを2カラム幅にし、grid-column: 1 / 3 は1ライン目から3ライン目まで配置します（こちらも2カラム）。縦方向には同様に grid-row: span 2 を使います。Tailwindでは col-span-2 と row-span-2 に相当します。このプレイグラウンドでは、プレビューのセルをまたいでドラッグしてスパンアイテムを作成するか、アイテムパネルで正確な開始位置とスパン値を入力できます。CSSとTailwindの出力はどちらも操作に合わせてリアルタイムで更新されます。

gap プロパティでトラック間にスペースを追加します：gap: 16px は全ての行とカラムの間に16pxを設定します。gap: 24px 16px（行ギャップ、次に列ギャップ）で軸ごとに個別設定することも、row-gap と column-gap を直接使用することもできます。gap はセル間のスペースにのみ影響します — グリッドの外側にパディングを追加することはなく、これはよくある誤解の原因です。ここでは row-gap と column-gap のコントロールを使用してください — 均一なギャップのためにリンクするか、各軸を独立して微調整するためにリンクを外すことができます。

完全無料、登録不要、インストール不要です。Layoutit Gridは優れた出発点ですが、Tailwind出力がなく、grid-areaルールのコピーに別タブを経由する必要があります。Sarah DrasnerのCSSグリッドジェネレーターはアイテムレベルのコントロールやシェアリンクのないシンプルな教育ツールです。UtiloKitはTailwind CSS出力・名前付きテンプレートエリア・レスポンシブauto-fitモード・シェアリンク・インタラクティブなドラッグ操作によるスパンアイテムエディターをすべて1か所で提供します。すべてはブラウザ内でローカルに生成されるため、レイアウトがアップロードされることはありません。

はい。このツールは完全にレスポンシブで、iPhoneのSafariやAndroidのChromeを含むあらゆるモダンモバイルブラウザで動作します。外出先でグリッドレイアウトを構築し、CSSまたはTailwind出力をコピーしてプロジェクトにペーストできます。すべてがクライアントサイドで動作するため、アップロードもアカウントも待ち時間もありません。一度ページが読み込まれればオフラインでも動作します。ドラッグでスパンするアイテムエディターはタッチ操作に対応しているため、マウスなしで複雑なグリッドレイアウトを構築できます。