ツールを実行
CSS Gridジェネレーターは、列数（Columns）、行数（Rows）、余白（Gap）の各設定から、グリッドレイアウトに必要なCSSコードを出力するツールです。列や行に半角数字のみを入力した場合はrepeat表記（列は1fr単位、行はauto）へ自動変換され、200px 1frといった個別のカスタム指定もそのまま保持されます。全体の余白（Gap）に加えて、列間（Column Gap）や行間（Row Gap）の個別余白も設定可能です。数値として指定した余白はpx単位で出力され、未設定や0の場合は該当するプロパティの出力が省略されます。Webデザインやフロントエンド開発のCSSコーディング作業を素早く行う際に活用できます。
使い方
- グリッドの列設定（Columns）に分割数または幅の指定を入力します（初期値は3）。
- グリッドの行設定（Rows）に行数または高さの指定を入力します（初期値はauto）。
- 必要に応じて全体の余白（Gap）を数値で入力します（初期値は10）。
- 列間（Column Gap）や行間（Row Gap）に個別の余白が必要な場合は数値を設定します。
- 画面上の生成ボタンをクリックすると、レイアウト定義のCSSコードが出力欄に表示されます。
使用例
- 列設定に「3」、行設定に「auto」、全体余白に「10」を指定すると、display: grid、grid-template-columns: repeat(3, 1fr)、grid-template-rows: auto、gap: 10pxが出力されます。
- 列設定に「200px 1fr」、行設定に「2」、列余白に「16」、行余白に「8」を指定すると、grid-template-columns: 200px 1fr、grid-template-rows: repeat(2, auto)、column-gap: 16px、row-gap: 8pxのスタイルが生成されます。
よくある質問
列数に数値を入力した場合、どのようなCSSが出力されますか。
半角数字のみを入力した場合は、repeat(数値, 1fr)という形式で等分割の列テンプレートが生成されます。
pxや%などのカスタム単位を列や行に直接指定できますか。
はい、可能です。数値以外の文字を含む指定（例: 200px 1frなど）を入力すると、記述した文字列がそのままCSSテンプレートに反映されます。
余白の単位を変更することはできますか。
余白の数値入力はpx単位として出力されます。余白が0または未設定の場合は、該当する余白プロパティの出力が自動的に省略されます。