この記事の対象: CSS Gridを実務で使いこなしたいフロントエンドエンジニア
読了時間: 約9分
CSS Gridは2次元レイアウトを直感的に構築できるCSSの機能です。ブラウザ対応はすでに主要4ブラウザ（Chrome・Edge・Firefox・Safari）すべてで安定し、実務で使わない理由はなくなりました。むしろ2026年現在は「Gridを使うかどうか」ではなく「GridとFlexboxをどう組み合わせるか」が論点です。
この記事では、そのまま貼って使える実践パターン8選と、Flexboxとの使い分けの判断軸を、Soreiine!!ギャラリーに掲載されている実例とあわせて紹介します。
CSS Gridの基礎おさらい
まずは最小構成を確認しておきます。
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3カラム均等 */
gap: 24px; /* 要素間の余白 */
}
grid-template-columns でカラムの数と幅を定義し、gap で要素間の余白を指定するのが基本の型です。かつては余白をmarginで作って最後の要素だけ打ち消す、という書き方が定番でしたが、gap が使えるようになってからはその処理が一切不要になりました。実務でGridを使う最大の理由は、この「余白の扱いが素直になる」という点にあります。
実装のポイントは、カラム数を固定するか、可変にするかを最初に決めることです。固定なら repeat(3, 1fr) のように数値で、可変なら後述する auto-fit を使います。この判断を後回しにすると、レスポンシブ対応のタイミングで書き直しが発生します。
実践パターン8選
①基本の2カラムレイアウト
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
}
@media (max-width: 768px) {
.two-col {
grid-template-columns: 1fr;
}
}
画像＋テキストの横並びに最適なパターンです。つまずきやすいのは align-items: center を忘れること。画像とテキストの高さが異なる場合、これが無いと上揃えになって見た目が揃いません。モバイルでは1カラムに切り替えるだけで十分なので、無理にGridを捨ててFlexboxへ書き換える必要はありません。
②サイドバー付きレイアウト
.with-sidebar {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
}
@media (max-width: 768px) {
.with-sidebar {
grid-template-columns: 1fr;
}
}
ブログやドキュメントサイトの定番レイアウトです。サイドバー幅を固定値（280px）にしておくと、本文側の 1fr が残りの幅を自動で占有するため、幅を計算する必要がありません。
③Bento Grid
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 16px;
}
.bento-item:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}
.bento-item:nth-child(4) {
grid-column: span 2;
}
不均一なグリッドで情報の優先度を視覚化するパターンです。Soreiine!!ギャラリーに掲載されているサイトの中には、採用サイトのトップでこの型を使っている例があります。写真と数字を大小のブロックに振り分け、見せたい実績ほど大きく配置する構成で、スクロールせずに「何をしている会社か」が一目で伝わる作りになっていました。詳しい組み方は下記の記事でさらに詳しく解説しています。
④カードグリッド（auto-fit）
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
カラム数が画面幅に応じて自動で増減する、最もレスポンシブなパターンです。メディアクエリを一切書かずに、1カラムから4カラムまで滑らかに切り替わります。minmax(280px, 1fr) の 280px がカードの最小幅になるので、ここをコンテンツに合わせて調整するだけで対応幅が決まります。つまずきやすいのは auto-fit と auto-fill の違いです。要素数が少ないときに余ったスペースを埋めるか空けるかが異なるため、カードの枚数が可変の一覧ページでは auto-fit を選ぶのが基本です。
⑤フッターを最下部に固定
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* header → main → footer の3要素 */
コンテンツが少ないページでもフッターが画面最下部に表示される、シンプルながら実務頻度が高いパターンです。以前はFlexboxで flex: 1 を本文側に当てる書き方が主流でしたが、Gridなら行の高さ定義だけで済むので可読性が上がります。
⑥画像ギャラリー（Masonry風）
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.gallery img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 縦長の画像を2行分に */
.gallery .tall {
grid-row: span 2;
}
Pinterest風の不規則なグリッドをCSSだけで実現するパターンです。JavaScriptライブラリに依存したMasonryレイアウトと違い、レンダリング前に高さが確定するためレイアウトシフトが起きにくいという利点があります。縦長の画像に .tall クラスを付けるだけで行をまたげるので、CMSから投入する画像の縦横比が揃わないギャラリーページに向いています。
⑦ダッシュボード風レイアウト
.dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 16px;
}
.dashboard .widget-large {
grid-column: span 2;
}
.dashboard .widget-full {
grid-column: 1 / -1; /* 全幅 */
}
管理画面やアナリティクスダッシュボードに最適なパターンです。grid-column: 1 / -1 は「1列目から最後の列まで」という指定で、カラム数を変更しても書き直しが不要になる書き方です。ウィジェットの数や大きさが運用中に増減するSaaS管理画面では、この柔軟性が効いてきます。
⑧フルスクリーンセクション切り替え
.fullscreen-sections {
display: grid;
grid-auto-rows: 100vh;
}
.fullscreen-sections > section {
display: grid;
place-items: center;
}
各セクションがビューポートの高さいっぱいに表示される、LPやプレゼンテーション型のレイアウトです。place-items: center は align-items と justify-items を1行でまとめた書き方で、セクション内のコンテンツを縦横中央に置きたいときに重宝します。
最初に骨格（①②）を決め、一覧ページには④、トップページの見せ場には③、特定ページ全体を占有したいときには⑧、という順で当てはめると迷いません。
GridのコードはAIに書かせやすい部類です。「auto-fitのカードグリッドを書いて」と頼めば大抵は一発で動くコードが返ってきますが、grid-column: span 2 のような個別要素への指定はHTML側の構造を理解していないと崩れることがあります。AIにコードを書かせる場合も、どの要素が何カラム分を占めるかは自分で設計してから渡すのが安全です。AIコーディングはWeb制作の現場で使えるか｜実案件での使いどころでも触れていますが、レイアウトの意図を言語化できていないと、AIの出力をそのまま信じて崩れたまま公開してしまうケースが実際にあります。
CSS Grid vs Flexbox — 使い分けガイド
| 用途 | Grid | Flexbox |
|---|---|---|
| 2次元レイアウト（行×列） | ★★★ | ★☆☆ |
| 1次元レイアウト（横並び） | ★★☆ | ★★★ |
| ページ全体の構造 | ★★★ | ★☆☆ |
| ナビゲーションの横並び | ★★☆ | ★★★ |
| カードグリッド | ★★★ | ★★☆ |
| 要素の中央配置 | ★★★ | ★★★ |
Grid向き
- 行と列を両方制御したい
- ページ全体の骨格
- カードの一覧・ダッシュボード
Flexbox向き
- 1方向の並びだけ
- ナビゲーション・ボタン群
- 要素数が不定の横並び
判断基準はシンプルで、行と列の両方を制御したいならGrid、1方向の並びだけならFlexboxです。ただし実務では両方を組み合わせることがほとんどです。ページ全体の骨格をGridで組み、その中のナビゲーションやボタン群だけFlexboxで横並びにする、という入れ子構成が最も崩れにくいという印象です。Soreiine!!ギャラリーに掲載されているECサイトの商品ページでも、商品一覧はGridのauto-fit、ページ上部のパンくずやタブ切り替えはFlexboxという組み合わせがよく見られます。Shopify商品ページの構成と作り方｜要素を置く順番の設計もあわせて読むと、どの要素をどちらのレイアウト手法に任せるかの判断材料になります。
実装前に確認しておきたいこと
パターンを当てはめる前に、次の3点を先に決めておくと手戻りが減ります。
- ブレークポイントの数: モバイル・タブレット・PCの3段で十分なケースが大半です。4段以上に増やすと、各パターンの
@mediaが増えてメンテナンスコストが上がります - カラム数が可変かどうか: CMSで記事やカードの数が増減するなら④のauto-fitを基本形にしておくと、追加の分岐コードが要りません
- 既存コンポーネントとの整合: 既にFlexboxで組まれたナビゲーションやボタン群をGridに書き換える必要はありません。骨格だけGridに差し替えて、内側は既存のFlexboxを残す方が変更範囲が小さく済みます
この3点を最初のミーティングで決めてから着手すると、実装中にレイアウト手法を迷う時間が減ります。
よくある質問
CSS GridとFlexboxはどちらを先に学ぶべきですか
先にFlexboxを学んでから、Gridに進むのがおすすめです。Flexboxは1次元の並びに特化しているため理解が早く、Gridの2次元の考え方はFlexboxの延長で捉えると飲み込みやすくなります。実務ではどちらも必須なので、最終的には両方使えることが前提になります。
auto-fitとauto-fillの違いがわかりません
要素数がカラム数より少ないときの挙動が異なります。auto-fit は余ったカラムを広げて空きスペースを埋め、auto-fill は余ったカラムを空のまま残します。カード枚数が可変の一覧ページでは、見た目が間延びしない auto-fit を使うのが基本です。
Gridで組んだレイアウトが古いSafariで崩れることはありますか
現在サポート対象となる範囲のSafariであれば、この記事で紹介したプロパティはすべて問題なく動作します。ただし subgrid のような比較的新しい機能は対応状況が異なるため、使う前に対応ブラウザを個別に確認してください。
Grid Layoutの学習に向いている練習方法はありますか
既存サイトのレイアウトを見て、どの部分がGridでどの部分がFlexboxかを推測してから、ブラウザの開発者ツールで実際のCSSを確認する方法が実務感覚を養いやすいです。Soreiine!!ギャラリーに掲載されているサイトを見比べるのも、パターンの使い分けを学ぶ手がかりになります。
既存サイトをFlexboxからGridへ移行する必要はありますか
動いているFlexboxのコードを無理にGridへ書き換える必要はありません。移行を検討すべきなのは、ブレークポイントごとに flex-direction やmarginの打ち消しが増えて管理が煩雑になってきたタイミングです。新規ページやリニューアルのタイミングで骨格だけGridに差し替え、既存のFlexboxコンポーネントはそのまま内側に残す、という段階的な移行が現場では現実的です。
まとめ
CSS Gridの実践パターンをまとめます。
- auto-fitカードグリッドはメディアクエリ不要で最もレスポンシブ
- Bento Gridで優先度を視覚化し、トップページの見せ場を作る
grid-template-rows: auto 1fr autoでフッター固定- GridとFlexboxは併用が基本。骨格はGrid、1方向の並びはFlexbox
- AIにコードを書かせる場合も、レイアウトの意図は自分で設計してから渡す
