コンテンツへスキップ
CSS Grid Generator
列数・行数・間隔を指定してCSS Gridのスタイルを生成（ジェネレーター）します。
使い方
- 「列数」「行数」「間隔（px）」を入力します。
- 「CSSを生成する」ボタンをクリックします。
- プレビューと、display: gridを含むCSSが表示されます。
入力例・出力例
入力
列数3 / 行数2 / 間隔16px
出力
display: grid; grid-template-columns: repeat(3, 1fr); ...
よくある質問
列数・行数はどこまで指定できますか？
1〜12の範囲で指定できます。
各列・各行の幅を個別に変更できますか？
本ツールはすべての列・行を均等（1fr）に配置するグリッドを生成します。個別の幅指定が必要な場合は、生成されたCSSのgrid-template-columns/rowsを手動で編集してください。
列と行で異なる間隔を指定できますか？
現在は列・行共通の間隔（gap）のみに対応しています。