CSS Grid ジェネレーター
行数・列数・隙間（gap）を指定するだけで、複雑なCSS Gridのコードを簡単に生成できます。
▶このツールについて
複雑な2次元レイアウトを簡単に組める「CSS Grid」のプロパティを、直感的なフォーム操作で生成できるツールです。行（row）や列（column）の数、余白のサイズを入力するだけで、必要な`grid-template`のコードが完成します。
要素を格子状に並べるのに便利なCSS Gridですが、「`grid-template-columns`の書き方を毎回MDNで調べている…」という方も多いはず。このツールなら、何列・何行のレイアウトを作りたいのか、さらに `fr` や `px` などの単位と隙間（gap）の大きさを指定するだけで、すぐに使えるCSSが手に入ります。ダッシュボードの設計や、商品カードを整然と並べたい時にうってつけです。
ツール操作
使い方
- 行数・列数・トラックサイズ（fr, px, auto等）・ギャップを入力します
- 生成されたgrid-templateのCSSが表示されます
- コピーボタンでCSSをコピーしてプロジェクトに貼り付けます
いつ使うか
グリッドレイアウトの構築、カード一覧・ダッシュボードのレイアウト設計に。
使用例
3列×2行、各1fr、gap: 1rem → grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
よくある質問
CSS Gridのfrとは？
fractionの略。利用可能な空間の割合を指定。1fr 1fr 1fr なら3等分、2fr 1fr なら2:1の比率になります。
grid-templateとflexboxの違いは？
| 項目 | CSS Grid | Flexbox |
| 次元 | 2次元（行・列） | 1次元（行 or 列） |
| 向き | カード一覧・ダッシュボード | ナビ・単純な並び |
| 指定 | grid-template | flex-direction |
複雑なレイアウトはGrid、単純な並びはFlexboxが向きます。
| 次元 | 2次元（行・列） | 1次元（行 or 列） |
| 向き | カード一覧・ダッシュボード | ナビ・単純な並び |
| 指定 | grid-template | flex-direction |
複雑なレイアウトはGrid、単純な並びはFlexboxが向きます。
grid-template-columnsの書き方は？
repeat(3, 1fr)で3等分、200px 1fr 1frで固定+可変、minmax(200px, 1fr)で最小最大を指定。このツールで生成できます。
CSS Gridのgapとは？
行と列の間隔。gap: 1rem で一括、row-gap と column-gap で個別指定。Flexboxのgapと同様の使い方です。
grid-template-areasの使い方は？
名前付きエリアでレイアウトを定義。header、main、sidebarなどを配置し、子要素にgrid-areaで割り当てます。
repeat()の使い方は？
repeat(3, 1fr)で1frを3回繰り返し。repeat(auto-fill, minmax(200px, 1fr))でレスポンシブに自動配置できます。
GridとFlexboxの使い分けは？
カード一覧や2次元レイアウトはGrid。ナビゲーションや1行の並びはFlexbox。組み合わせて使うことも多いです。
minmax()とは？
最小値と最大値を指定。minmax(200px, 1fr)で最小200px、最大1fr。レスポンシブなGridに便利です。
grid-auto-rowsとは？
明示的に定義していない行のサイズを指定。grid-auto-rows: 100px で暗黙の行の高さを統一できます。
CSS Gridのブラウザ対応は？
主要ブラウザで広く対応。IE11は部分的対応のため、@supportsでフォールバックを用意する場合があります。