CSS Grid Generator

概要

• 列数・行数・間隔（gap）を指定するだけで、CSS Gridレイアウトのスタイルを生成するツールです。

• プレビューでグリッドの見た目をその場で確認しながら、必要な列数・行数・間隔を調整できます。

• 生成されるのは、すべての列・行を均等（1fr）に配置するシンプルなグリッドです。

使い方

1. 1

   「列数」「行数」「間隔（px）」を入力します。

2. 2

   「CSSを生成する」ボタンをクリックします。

3. 3

   プレビューと、display: gridを含むCSSが表示されます。

入力例・出力例

列数3 / 行数2 / 間隔16px

display: grid; grid-template-columns: repeat(3, 1fr); ...

利用シーン

• カード一覧やギャラリーなど、均等な列幅のグリッドレイアウトを組む際のCSSを素早く生成する

• レイアウトのラフを作る段階で、列数・行数・間隔を変えながらプレビューで見た目を確認する

• CSS Gridの基本的な書き方（grid-template-columns/rowsなど）を、実際の出力例から確認する

よくある質問

注意点

• 列数・行数は1〜12の範囲で指定できます。

• すべての列・行が均等（1fr）に配置されるグリッドのみに対応しています。列・行ごとに異なる幅が必要な場合は、生成後のCSSを手動で編集してください。

• 列と行で異なる間隔は指定できません。現在は共通のgap値のみに対応しています。