CSS Gridジェネレーター
grid-template-columns/rows・justify-items・align-items・gapをGUIで操作しながら、リアルタイムのプレビューを見てCSS Gridレイアウトを試せる無料ツール。生成された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ジェネレーターも参照）。
よくある質問
余談ですが ― 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つのページの中で両方を組み合わせて使うのがむしろ標準的な設計パターンとされています。