CSS Gridレイアウトの実践パターン集【コピペOK・2026年版】

この記事の対象: CSS Gridを実務で使いこなしたいフロントエンドエンジニア
読了時間: 約8分

CSS Gridは2次元レイアウトを直感的に構築できるCSSの機能です。2026年現在、ブラウザ対応率は99%以上に達し、実務で使わない理由がなくなりました。

この記事では、そのまま使える実践パターン8選と、Flexboxとの使い分けガイドを紹介します。

CSS Gridの基礎おさらい

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3カラム均等 */
  gap: 24px; /* 要素間の余白 */
}

grid-template-columnsでカラム定義、gapで余白を設定するのが基本です。

実践パターン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;
  }
}

画像＋テキストの横並びに最適。モバイルでは1カラムに切り替わります。

②サイドバー付きレイアウト

.with-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
}

@media (max-width: 768px) {
  .with-sidebar {
    grid-template-columns: 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;
}

Apple風の不均一グリッド。詳しくは「Bento Gridレイアウトの作り方」をご覧ください。

④カードグリッド（auto-fit）

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

カラム数が自動で増減する最もレスポンシブなパターン。メディアクエリ不要です。

⑤フッターを最下部に固定

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* header → main → footer の3要素 */

コンテンツが少ないページでもフッターが画面最下部に表示されます。

⑥画像ギャラリー（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だけでMasonry風のレイアウトを実現します。

⑦ダッシュボード風レイアウト

.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; /* 全幅 */
}

管理画面やアナリティクスダッシュボードに最適なパターンです。

⑧フルスクリーンセクション切り替え

.fullscreen-sections {
  display: grid;
  grid-auto-rows: 100vh;
}

.fullscreen-sections > section {
  display: grid;
  place-items: center;
}

各セクションがビューポートの高さいっぱいに表示される、LPやプレゼンテーション型のレイアウトです。

CSS Grid vs Flexbox — 使い分けガイド

基本的な判断基準: 行と列の両方を制御したい場合はGrid、1方向の並びだけならFlexbox。実務では両方を組み合わせることがほとんどです。

まとめ

CSS Gridの実践パターンをまとめます。

• auto-fitカードグリッドはメディアクエリ不要で最もレスポンシブ
• Bento GridでApple風の不均一レイアウトを実現
• grid-template-rows: auto 1fr autoでフッター固定
• GridとFlexboxは併用が基本。2次元はGrid、1次元はFlexbox