CSS Gridジェネレーター

列・行ごとのサイズ指定と、ドラッグによるセルの連結に対応したグリッドCSSを生成します。セルをドラッグ（またはクリック）するとアイテムとして連結され、grid-areaのコードが出力されます。

上端・左端の入力欄で各列・各行のサイズ（1fr / 200px / auto など）を個別に指定できます。セルをドラッグまたはクリックで連結アイテムを作成、アイテムの ✕ で削除します。

CSS Gridジェネレーターとは？

CSS Gridジェネレーターとは、グリッドレイアウトのCSSを視覚的に組み立てられるツールです。列・行それぞれのサイズを個別に指定でき、セルをドラッグして連結すると、grid-areaを使った配置コードまで自動生成されます。

列数・行数・間隔を指定するグリッドの基本構造を数値で指定します（各1〜8）。
各列・各行のサイズを調整するグリッドの上端・左端にある入力欄で、1fr・200px・autoなどトラックごとのサイズを個別に指定できます。
セルを連結してアイテムを作るセルをドラッグ（1セルだけならクリック）すると、その範囲が1つのアイテムとして連結されます。ヘッダーやサイドバーのような領域をプレビュー上で直接設計できます。アイテムは✕で削除できます。
コードをコピーするCSS（grid-template＋各アイテムのgrid-area）とHTMLがそれぞれ生成されます。

生成される「grid-area: 1 / 1 / 3 / 2」は「行の開始 / 列の開始 / 行の終了 / 列の終了」を表すグリッド線の番号です。この例では1行目の線から3行目の線まで（＝2行分）、1列目の線から2列目の線まで（＝1列分）の領域に配置される、という意味になります。

1fr：余ったスペースを比率で分配。「2fr」は他の1frの2倍の幅になります。px：固定サイズ。サイドバー（240pxなど）に。auto：中身に合わせたサイズ。minmax(200px, 1fr)：最小200pxを保ちつつ伸縮、といった組み合わせも入力できます。

ヘッダー・サイドバー・メイン・フッターの2次元レイアウトを、セル連結で直感的に設計できます。

「1枚だけ2列分の大きなカード」のような変則グリッドも、ドラッグだけで作れます。

操作とコードが連動するので、grid-templateとgrid-areaの仕組みを直感的に理解できます。

レスポンシブに対応させるには？

スマホ表示ではメディアクエリ内でgrid-template-columnsを1frに変更し、各アイテムのgrid-areaをautoに戻す（または縦並び用に再定義する）のが基本パターンです。

アイテム同士を重ねることはできますか？

本ツールでは、既存のアイテムと重なる範囲には新しいアイテムを作成できない仕様です。実際のCSSではz-indexと組み合わせて重ねることも可能です。

FlexboxとGridはどう使い分けますか？

1方向（横一列・縦一列）の並びはFlexbox、縦横2方向の格子状レイアウトはGridが得意です。セルの連結が必要なレイアウトはGrid一択です。