CSS Gridジェネレーター
行と列を設定し、セルをドラッグしてアイテムを配置するだけで、グリッドCSSと対応するHTMLをワンクリックでコピーできます。
グリッドの構築処理はお使いのブラウザ上で行われます。ここで設定したデータがBroBroGoにアップロードされることはありません。
よくある質問
グリッド上にアイテムを配置するにはどうすればよいですか？
セル上をドラッグして矩形領域を指定します。ドラッグを離すと、指定した行と列にまたがる子要素が配置されます。描画した各アイテムには、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はグリッド構造の定義と各アイテムの配置を行います。両方をプロジェクトに貼り付けるだけで、ここで設計した通りのレイアウトが再現されます。