CSS Gridジェネレーターの基本機能と操作
CSS Gridジェネレーターは、視覚的にCSSグリッドレイアウトを設計し、対応するCSSとHTMLコードを自動生成するツールです。画面上のセルをドラッグして矩形領域を指定することで、直感的にグリッドアイテムを配置できます。
設定可能な入力項目と制限値は以下の通りです：
- 列数： 1から12までの数値
- 行数（Rows）： 1から12までの数値
- 列の間隔： 0から48pxまでの数値
- 行の間隔（Row gap）： 0から48pxまでの数値
- 列のサイズおよび行のサイズ：
1fr、200px、auto、min-content、minmax(120px, 1fr)など、CSSグリッドで有効な任意のトラック値
グリッド上をドラッグしてマウスを離すと、選択した行と列にまたがる子要素（アイテム）が配置されます。ツールがサポートする最大アイテム数は16個です。配置されたアイテムの「×」をクリックすると、そのアイテムを削除できます。「アイテムをクリア」を実行すると、HTMLコンテナは空になり、アイテム数は0個になります。
グリッドトラックの定義とサイズ指定
各トラック（列または行）には専用のサイズ入力ボックスが用意されており、個別にサイズを指定できます。入力フィールドに not-a-grid-track のような無効な値を入力した場合、その入力フィールドは無効としてマークされますが、出力されるCSSコードには最後に設定されていた有効な値が維持されます。
生成されるCSSコードは、効率的な記述になるよう自動的に最適化されます。同じサイズを持つ複数のトラックは、出力CSSにおいて repeat() 関数を用いて折りたたまれます。また、列の間隔と行の間隔は個別に設定できますが、両方の値が一致している場合は、CSS出力において単一の gap プロパティに統合されます。
アイテムの配置と重ね合わせ
ドラッグ操作によって配置された各アイテムには、CSS側で固有の grid-column および grid-row ルールが割り当てられ、HTML側には対応する div 要素が生成されます。
グリッドアイテムは互いに重ね合わせて配置することが可能です。アイテムが重複して配置された場合、後から描画されたアイテムが上に重なって表示されます。
プリセットレイアウトの活用
特定のレイアウト構造を素早く作成するために、以下の4つのプリセットが用意されています：
- サイドバー
- ヘッダー＆フッター
- ギャラリー： 3列、2行、3アイテムで構成されるグリッドを自動生成します
- ダッシュボード
これらのプリセットを選択することで、典型的なレイアウトの土台を瞬時に構築できます。
プライバシーとデータ処理について
グリッドの構築処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
グリッド上にアイテムを配置するにはどうすればよいですか？
セル上をドラッグして矩形領域を指定します。ドラッグを離すと、指定した行と列にまたがる子要素が配置されます。描画した各アイテムには、CSSで独自のgrid-columnおよびgrid-rowルールが割り当てられ、HTMLには対応するdiv要素が生成されます。アイテム同士を重ねることも可能で、後から描画したものが上に重なります。アイテムを削除するには、アイテム上の「×」ボタンを押します。
列や行のサイズを個別に変更することはできますか？
はい、可能です。各トラックに個別のサイズ入力ボックスがあり、1fr、200px、auto、min-content、minmax(120px, 1fr)などの任意のグリッド値を入力できます。同じサイズを共有するトラックは、コードを簡潔に保つために自動的にrepeat()形式にまとめられます。列の間隔（column gap）と行の間隔（row gap）は個別に設定でき、値が同じ場合は自動的に1つのgapプロパティに統合されます。
生成されたコードはどのように使えばよいですか？
生成されたCSSとHTMLをそれぞれコピーします。HTMLはコンテナと各アイテムに対応するdiv要素を出力し、CSSはグリッド構造の定義と各アイテムの配置を行います。両方をプロジェクトに貼り付けるだけで、ここで設計した通りのレイアウトが再現されます。