CSSグリッドはCSSで最も強力なレイアウトシステムですが、グリッドプロパティを手書きするのは面倒です——カラム数、ギャップサイズ、名前付きテンプレートエリアを繰り返し調整するときは特に。CSSグリッドジェネレーターを使えば、レイアウトを視覚的に設定して必要なCSSをそのままコピーできます。
CSSグリッドの仕組み
CSSグリッドはコンテナを2次元レイアウトシステムに変えます。Flexbox（単一軸でアイテムを並べる）と異なり、グリッドは行と列の両方を同時に明示的に制御できます。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1.5rem;
}これで3カラムのグリッドが作成され、各カラムが利用可能な幅を均等に分割し、セル間に1.5remのギャップが入ります。
グリッドの主要プロパティ
grid-template-columns と grid-template-rows
グリッドのトラック構造を定義します。よく使うパターン：
| パターン | CSS | 結果 |
|---|---|---|
| 均等カラム | repeat(3, 1fr) | 3等幅カラム |
| 固定＋流動 | 240px 1fr | サイドバー＋メインコンテンツ |
| 名前付きエリア | [sidebar] 240px [main] 1fr | 名前付きカラムトラック |
| 自動充填 | repeat(auto-fill, minmax(200px, 1fr)) | レスポンシブカードグリッド |
| 混合単位 | 200px 1fr 2fr | 固定＋流動2カラム |
gap（旧 grid-gap）
トラック間のスペースを制御します。行と列のギャップを個別に設定できます：
gap: 1rem; /* 両方向に同じギャップ */
gap: 1rem 2rem; /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;grid-column と grid-row
グリッド内でアイテムを明示的に配置：
.hero {
grid-column: 1 / -1; /* 全幅にスパン */
grid-row: 1 / 3; /* 2行にスパン */
}
.sidebar {
grid-column: 1;
grid-row: 2 / 5;
}
.main {
grid-column: 2 / -1;
grid-row: 2 / 5;
}-1 は最後のグリッドラインを指すため、1 / -1 はカラム数に関わらず常に全幅になります。
grid-template-areas
名前付きエリアで複雑なレイアウトを可読に：
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 40px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }grid-template-areas の各文字列は1行を表します。同じ名前を繰り返すと複数セルにスパンします。. は空セルを表します。
よく使うグリッドパターン
カードグリッド（自動レスポンシブ）
最も一般的なユースケース：メディアクエリなしで利用可能スペースを埋め自然に折り返すカードグリッド。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}auto-fill は収まる限りカラムを生成します。minmax(280px, 1fr) で各カードは最小280px幅を保ちながら利用可能スペースに拡張します。
ホーリーグレイルレイアウト
ヘッダーとフッター付きの古典的な3カラムレイアウト：
.page {
display: grid;
grid-template-columns: 200px 1fr 160px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}メイソンリー風グリッド
真のメイソンリーにはJavaScriptが必要ですが、近似できます：
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 10px;
gap: 10px;
}
/* 各アイテムはコンテンツの高さに応じて行をスパン */
.item { grid-row-end: span 20; } /* 短い */
.item.tall { grid-row-end: span 35; } /* 長い */ダッシュボードグリッド
.dashboard {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
.widget-full { grid-column: span 12; }
.widget-half { grid-column: span 6; }
.widget-third { grid-column: span 4; }
.widget-quarter { grid-column: span 3; }グリッドレイアウトをレスポンシブにする
メディアクエリを使う方法
.grid {
display: grid;
grid-template-columns: 1fr; /* モバイルは1カラム */
gap: 1rem;
}
@media (min-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}auto-fill + minmax（メディアクエリなし）
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 1rem;
}min(100%, 280px) は非常に狭い画面でのオーバーフローを防ぎます——minmax のよくある落とし穴です。
名前付きエリア＋メディアクエリ
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 1fr 300px;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
}グリッドとFlexbox：使い分け
どちらも現代的なレイアウトツールです。区別はシンプルです：
- グリッド：2次元レイアウト。行と列の両方を制御。ページ構造、ダッシュボード、カードグリッド、フォームレイアウトに使います。
- Flexbox：1次元。アイテムは単一軸に沿って並びます。ナビゲーションバー、ボタングループ、単一要素のセンタリング、行内のアイテム整列に使います。
組み合わせても機能します——グリッドレイアウトの中にFlexコンテナを入れることも、その逆も可能です。
グリッドレイアウトのデバッグ
Chrome、Firefox、EdgeはすべてDevToolsにグリッドインスペクターを内蔵しています。Elementsパネルでグリッドコンテナの横にある grid バッジをクリックすると、グリッドラインがページ上に重ねて表示され、カラム/行番号とギャップが確認できます。
FirefoxのGridインスペクターは特に強力で、名前付きエリアのハイライトと複数の同時グリッドオーバーレイをサポートしています。
CSSグリッドジェネレーターを使う
複雑なレイアウトで grid-template-columns、grid-template-rows、gap の値を手動で設定するのは試行錯誤になりがちです。CSSグリッドジェネレーターなら：
- カラム数と行数を視覚的に設定
- ドラッグでトラックサイズを調整
fr、px、%、auto単位を切り替え- 完全なCSSブロックをコピーしてすぐに貼り付け