CSS Gridジェネレーター
grid-template-columns/rows・justify-items・align-items・gapをGUIで操作しながら、リアルタイムのプレビューを見てCSS Gridレイアウトを試せる無料ツール。生成されたCSSコードはワンクリックでコピー可能。
CSS Gridを触りながら組み立てる
CSS Grid は行と列を同時に扱える2次元のレイアウト方式です。このツールでは `grid-template-columns`／`rows`・`justify-items`・`align-items`・`gap` を画面上で切り替えながら結果を確かめ、できあがったCSSをコピーできます。
**Flexbox との使い分けは「軸が1本か2本か」で考えると迷いません。** 横一列に並べるだけなら Flexbox、**行と列の両方を揃えたい表組みのような配置なら Grid** が向いています。Grid ならではの強みが `fr` という単位で、これは「残りの空間の取り分」を表します。`1fr 2fr` と書けば、余った幅を1対2で分け合います。**そしてもう一つ覚えておきたいのが `repeat(auto-fit, minmax(200px, 1fr))` という書き方です。** これだけで、**メディアクエリを1つも書かずに、幅に応じて列数が自動的に増減するレイアウト**が作れます。
使い方
- プリセットから始める 3カラムやヘッダー・サイドバー構成など、よく使う形が用意してあります。
- 列と行の定義を変える **`fr` を使うと、残りの空間を比率で分け合えます。**
- 配置のプロパティを試す `justify-items` と `align-items` で、各セルの中身の寄せ方を決めます。
- 生成されたCSSをコピーする 納得のいく形になったら、そのままコードへ貼り付けられます。
使いこなすためのヒント
- grid-template-columns: repeat(3, 1fr)のfr単位は「残りスペースを分け合う比率」を表し、pxのような固定値と違って画面幅が変わっても列の比率が保たれます。
- gapプロパティは行間・列間の余白のみに適用され、marginと違ってグリッドの外側には影響しません。行と列で別の余白（row-gap/column-gap）を指定することも可能です。
- 「auto」モードのトラックはコンテンツの実際のサイズに合わせて伸縮するため、画像やテキスト量が不定な列・行に向いています。
- grid-column: span 2のようなアイテム個別のspan指定を使うと、ヘッダーやフッターだけをグリッド全幅に広げるレイアウトが簡単に作れます。
- 複雑な格子状の配置が必要な場合はGrid、ナビゲーションバーのような1方向の並びで十分な場合はFlexboxが適しています（CSS Flexboxジェネレーターも参照）。
活用シーン
ページ全体の骨組みを作る
**ヘッダー・サイドバー・メイン・フッターの配置は Grid の得意分野です。**
カードを格子状に並べる
**`auto-fit` と `minmax` を組み合わせると、画面幅に応じて列数が自動で変わります。**
入力フォームを整列させる
ラベルと入力欄の列を揃えると、縦のラインが通って読みやすくなります。
Gridを学ぶ
値を変えながら結果を見ると、行と列がどう決まるのかが掴めます。
CSS Gridの用語
- グリッドコンテナ
- `display: grid` を指定した親要素のことです。この中で行と列が定義されます。
- fr
- **残りの空間の取り分を表す単位**です。`1fr 2fr` なら、余白を1対2で分け合います。
- grid-template-columns
- 列の並びと幅を定義します。`repeat()` を使うと同じ指定を繰り返せます。
- minmax
- 最小値と最大値を指定する関数です。**`minmax(200px, 1fr)` は「200pxは確保しつつ、余れば広がる」という意味になります。**
- auto-fit
- 入る分だけ列を作る指定です。**`minmax` と組み合わせることで、メディアクエリなしに折り返せます。**
- gap
- 行と列の間に空ける余白です。行方向と列方向を別々に指定することもできます。
よくある質問
余談ですが ― Flexboxとは異なる「2次元」を目指したCSS Grid
CSS Grid Layout（正式名称: CSS Grid Layout Module）は、Flexboxが「1方向（行または列）の並び」に特化しているのに対し、行と列を同時に定義できる2次元のレイアウトシステムとして設計されました。W3Cでの標準化は2011年頃から進み、2017年にChrome・Firefox・Safari・Edgeの主要ブラウザで足並みを揃えて実装されたことで、実務での採用が一気に広がりました。
Grid登場以前、ページ全体を「ヘッダー・サイドバー・メインコンテンツ・フッター」という格子状に配置する、いわゆる「ホーリーグレイル（聖杯）レイアウト」は、floatやテーブルタグを使った複雑な回避策でしか実現できませんでした。CSS Gridはgrid-template-columns・grid-template-rows・grid-template-areasといった宣言的なプロパティにより、この定番レイアウトをわずか数行のCSSで組めるようにしました。
現在ではダッシュボードUIや画像ギャラリー、雑誌風のマガジンレイアウトなど、行と列を意識したデザインの多くがCSS Gridで実装されています。ネストしたグリッドの間で親のトラック幅を子が引き継げる「subgrid」も主要ブラウザで対応が進んでおり、より複雑なレイアウトの一貫性を保ちやすくなっています。
実務では「ページ全体の骨格はGrid、コンポーネント内部の要素の並びはFlexbox」という役割分担が定着しつつあります。両者は競合する技術ではなく、1次元の整列と2次元の格子配置という異なる得意分野を持つ補完的なツールであり、1つのページの中で両方を組み合わせて使うのがむしろ標準的な設計パターンとされています。