このツールについて
CSS Grid Generator は、列数・行数・ギャップという3つのシンプルなコントロールを、そのまま貼り付けられる CSS グリッドレイアウトに変える無料のブラウザ内ツールです。値を設定すると、ライブプレビューが描き直され、生成されたルールをコピーできます。
列と行は1〜12の整数（既定は3と2）、ギャップは0〜40ピクセルのスライダー（既定は10）です。どちらの次元も repeat() と 1fr 単位で書き出されるため、すべてのトラックが利用可能なスペースを均等に分け合います。プレビューは各セルを番号付きの色付きブロックで埋めるため、トラック構造がひと目でわかります。出力は display: grid、grid-template-columns、grid-template-rows、gap を使ったシンプルな .grid ルールです。ワンクリックでクリップボードにコピーできます。
すべてはブラウザ内で完結します。アップロード・アカウント・追跡はなく、ページを一度読み込めばオフラインでも動作し続けます。
よくある質問
トラックのサイズはどう決まりますか？
列と行はどちらも repeat() と 1fr 単位で書き出されるため、すべてのトラックが利用可能なスペースを均等に分け合います。
ギャップのコントロールは何をしますか？
すべてのセル間のグリッドギャップを0〜40ピクセルで設定し、プレビューと生成される CSS の両方にリアルタイムで適用されます。
コントロールで指定できる範囲は？
列と行は1〜12の整数、ギャップのスライダーは0〜40ピクセルです。範囲外や数字以外の入力は制限され、既定の3列・2行・10px のギャップに戻ります。
どんな CSS が出力されますか？
display: grid、それぞれ repeat() と 1fr で設定された grid-template-columns と grid-template-rows、そしてピクセル単位の gap を含む .grid ルールです。「Copy」ボタンでそのルールがそのままクリップボードに置かれます。