1–12
1–12
例: 1fr 1fr 1fr、200px 1fr、repeat(3,1fr)
例: auto、100px auto、repeat(3,80px)
セルのスパン（セルを選択）
スパンしているセルは緑色で表示されます。
セルをクリックして選択し、下で列/行のスパンを設定してください。
生成された CSS
CSS Grid とは？
CSS Grid Layout は現代のブラウザーに組み込まれた2次元レイアウトシステムです。display: grid でグリッドコンテナを定義し、grid-template-columns で列を、grid-template-rows で行を制御します。分数単位（fr）は利用可能なスペースを比例配分します。子要素は grid-column: span N と grid-row: span N を使って複数の列や行にまたがることができます。
CSS Grid ジェネレーターの使い方
-
数値入力（各1～12）を使って列数と行数を設定します。
-
grid-template-columns と grid-template-rows を調整してサイズを制御します（例: 1fr 2fr、200px auto）。
-
セル間のギャップを設定します（例: 10px、1rem）。
-
プレビュー内のセルをクリックして選択します（オレンジ色になります）。
-
「セルのスパン」パネルで 「col-span」と「row-span」を設定し、「適用」をクリックします。スパンしているセルが緑色になります。
-
「CSS」または「HTML」タブをクリックして出力形式を切り替え、クリップボードにコピーします。
-
「すべてリセット」をクリックして、新しい 3×3 グリッドでやり直します。