【CSS】CSS Gridの使い方｜基本から実務レイアウトまで完全ガイド

この記事で学べること

• CSS Gridの基本概念とFlexboxとの違い
• grid-template-columns / rows、fr単位、repeat()、minmax() の使い方
• gap プロパティによる余白制御
• grid-column / grid-row / span によるアイテム配置
• grid-template-areas による直感的なレイアウト定義
• 整列プロパティ（justify-items、align-items、place-items など）
• 実務で使えるレイアウトパターン集（カードグリッド・聖杯レイアウト・ダッシュボードなど）
• FlexboxとGridの使い分け基準

.container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 16px;}

ポイント：FlexboxとGridは「どちらが優れている」ではなく「用途が違う」ツールです。実務では両方を組み合わせて使うのが一般的です。ページ全体のレイアウトはGrid、ナビバーやボタン群などの1列の並びはFlexbox、と使い分けましょう。

<div class="grid-container">  <div>Item 1</div>  <div>Item 2</div>  <div>Item 3</div>  <div>Item 4</div>  <div>Item 5</div>  <div>Item 6</div></div>

.grid-container {  display: grid;  grid-template-columns: 200px 200px 200px;}

display: inline-grid を使うと、グリッドコンテナ自体がインライン要素として振る舞います。テキストの中にグリッドを埋め込みたい場面で使いますが、実務ではほとんど使いません。

/* 固定幅で3列 */grid-template-columns: 100px 200px 150px;/* パーセントで3列 */grid-template-columns: 25% 50% 25%;/* 固定幅 + 残りを自動 */grid-template-columns: 200px auto 200px;

.grid-container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  grid-template-rows: 100px 200px;}

/* 3列を等幅に */grid-template-columns: 1fr 1fr 1fr;/* 左を1、中央を2、右を1の比率 */grid-template-columns: 1fr 2fr 1fr;/* サイドバー200px固定 + メインが残り全部 */grid-template-columns: 200px 1fr;

ポイント：fr 単位はグリッドレイアウトで最もよく使う単位です。% よりも柔軟で、gap との相性も良いため、迷ったら fr を使いましょう。

/* この2つは同じ意味 */grid-template-columns: 1fr 1fr 1fr 1fr;grid-template-columns: repeat(4, 1fr);/* 200px を3回繰り返し */grid-template-columns: repeat(3, 200px);/* パターンの繰り返しも可能 */grid-template-columns: repeat(3, 1fr 2fr);/* → 1fr 2fr 1fr 2fr 1fr 2fr（6列）*/

/* 最小200px、最大1frの3列 */grid-template-columns: repeat(3, minmax(200px, 1fr));/* 行の高さ: 最小100px、コンテンツに合わせて伸びる */grid-template-rows: minmax(100px, auto);

/* auto-fill: 最小250pxの列を詰められるだけ詰める */grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));/* auto-fit: auto-fillと似ているが、空の列を潰す */grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

ポイント：実務では auto-fit の方がよく使われます。アイテム数が少ないときに余った空間をアイテムに分配してくれるため、見た目が自然になります。auto-fill は空の列が残るため、特定のグリッド幅を維持したい場合に使います。

.grid-container {  display: grid;  grid-template-columns: repeat(3, 1fr);  /* 行と列のギャップを同時に設定 */  gap: 20px;  /* 行と列を個別に設定 */  gap: 20px 40px; /* row-gap column-gap */  /* 個別プロパティ */  row-gap: 20px;  column-gap: 40px;}

かつては grid-gap、grid-row-gap、grid-column-gap という名前でしたが、現在は gap、row-gap、column-gap に統一されています。古い名前でも動作しますが、新しい名前を使いましょう。

  列線1    列線2    列線3    列線4    |        |        |        |    v        v        v        v    +--------+--------+--------+ <-- 行線1    | col 1  | col 2  | col 3  |    +--------+--------+--------+ <-- 行線2    | col 1  | col 2  | col 3  |    +--------+--------+--------+ <-- 行線3

.item-a {  /* 列線1から列線3まで（2列分）*/  grid-column: 1 / 3;  /* 行線1から行線2まで（1行分）*/  grid-row: 1 / 2;}.item-b {  /* 列線3から列線4まで（1列分）*/  grid-column: 3 / 4;  /* 行線1から行線3まで（2行分）*/  grid-row: 1 / 3;}

.header {  /* 3列分にまたがる */  grid-column: span 3;}.sidebar {  /* 2行分にまたがる */  grid-row: span 2;}.featured {  /* 2列×2行にまたがる */  grid-column: span 2;  grid-row: span 2;}

ポイント：実務では span を使う方が多いです。「2列分またがる」の方が「グリッド線1から3」よりも意味が伝わりやすく、コードの可読性が上がります。

.layout {  display: grid;  grid-template-columns: 200px 1fr;  grid-template-rows: 60px 1fr 40px;  grid-template-areas:    "header  header"    "sidebar main"    "footer  footer";  gap: 16px;  min-height: 100vh;}

.header  { grid-area: header; }.sidebar { grid-area: sidebar; }.main    { grid-area: main; }.footer  { grid-area: footer; }

<div class="layout">  <header class="header">ヘッダー</header>  <aside class="sidebar">サイドバー</aside>  <main class="main">メインコンテンツ</main>  <footer class="footer">フッター</footer></div>

grid-template-areas:  "header header header"  ".      main   sidebar"  "footer footer  footer";

/* モバイル: 1列レイアウト */.layout {  display: grid;  grid-template-columns: 1fr;  grid-template-areas:    "header"    "main"    "sidebar"    "footer";  gap: 16px;}/* デスクトップ: 2列レイアウト */@media (min-width: 768px) {  .layout {    grid-template-columns: 240px 1fr;    grid-template-areas:      "header  header"      "sidebar main"      "footer  footer";  }}

ポイント：grid-template-areas は、レイアウトの全体像を把握しやすく、チーム開発でもコードレビューがしやすいという大きなメリットがあります。ページ全体のレイアウトには積極的に使いましょう。

注意：grid-template-areas で定義するエリアは長方形でなければなりません。L字型やT字型のエリアは定義できません。また、各行の列数は必ず揃える必要があります。

.grid-container {  display: grid;  grid-template-columns: repeat(3, 200px);  grid-template-rows: repeat(2, 150px);  /* 水平方向（インライン軸）の整列 */  justify-items: center; /* start | end | center | stretch */  /* 垂直方向（ブロック軸）の整列 */  align-items: center; /* start | end | center | stretch */  /* 両方を一括指定 */  place-items: center; /* align-items justify-items */}

.grid-container {  display: grid;  grid-template-columns: repeat(3, 150px);  height: 500px;  /* グリッド全体を水平方向の中央に */  justify-content: center;  /* グリッド全体を垂直方向の中央に */  align-content: center;  /* 両方を一括指定 */  place-content: center;}

.grid-container {  justify-items: start; /* 全体はstart */}.special-item {  justify-self: end; /* このアイテムだけend */  align-self: center; /* このアイテムだけ垂直中央 */}

CSS Gridで要素を完全に中央揃えにしたい場合は、place-items: center を使うのが最も簡潔です。たった3行で水平・垂直の中央配置が実現できます。

.center-wrapper {  display: grid;  place-items: center;  min-height: 100vh;}

<div class="card-grid">  <div class="card">カード1</div>  <div class="card">カード2</div>  <div class="card">カード3</div>  <div class="card">カード4</div>  <div class="card">カード5</div>  <div class="card">カード6</div></div>

.card-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 24px;  padding: 24px;}.card {  background: #fff;  border-radius: 12px;  padding: 24px;  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  transition: transform 0.2s ease, box-shadow 0.2s ease;}.card:hover {  transform: translateY(-4px);  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);}

.holy-grail {  display: grid;  grid-template-columns: 200px 1fr 200px;  grid-template-rows: auto 1fr auto;  grid-template-areas:    "header  header  header"    "nav     main    aside"    "footer  footer  footer";  gap: 16px;  min-height: 100vh;}.holy-grail > header  { grid-area: header; }.holy-grail > nav     { grid-area: nav; }.holy-grail > main    { grid-area: main; }.holy-grail > aside   { grid-area: aside; }.holy-grail > footer  { grid-area: footer; }/* モバイル対応 */@media (max-width: 768px) {  .holy-grail {    grid-template-columns: 1fr;    grid-template-areas:      "header"      "nav"      "main"      "aside"      "footer";  }}

<div class="dashboard">  <div class="panel panel-wide">売上グラフ</div>  <div class="panel">アクセス数</div>  <div class="panel">新規ユーザー</div>  <div class="panel panel-tall">タスク一覧</div>  <div class="panel">お知らせ</div>  <div class="panel">最近の注文</div></div>

.dashboard {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-auto-rows: minmax(150px, auto);  gap: 20px;  padding: 20px;}.panel {  background: #fff;  border-radius: 12px;  padding: 20px;  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}/* 2列分の横長パネル */.panel-wide {  grid-column: span 2;}/* 2行分の縦長パネル */.panel-tall {  grid-row: span 2;}/* モバイル対応 */@media (max-width: 768px) {  .dashboard {    grid-template-columns: 1fr;  }  .panel-wide,  .panel-tall {    grid-column: span 1;    grid-row: span 1;  }}

.gallery {  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-auto-rows: 200px;  gap: 8px;}.gallery img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: 8px;  transition: transform 0.3s ease;}.gallery img:hover {  transform: scale(1.05);}/* メイン画像を大きく表示 */.gallery-featured {  grid-column: span 2;  grid-row: span 2;}/* レスポンシブ対応 */@media (max-width: 768px) {  .gallery {    grid-template-columns: repeat(2, 1fr);    grid-auto-rows: 150px;  }}

object-fit: cover を使うと、画像のアスペクト比を保ちながらグリッドセルいっぱいに表示されます。画像が切り取られるのが気になる場合は object-fit: contain に変更してください。

/* ページ全体: Grid */.page {  display: grid;  grid-template-columns: 240px 1fr;  grid-template-rows: auto 1fr auto;  min-height: 100vh;}/* ヘッダー内のナビ: Flexbox */.header-nav {  display: flex;  justify-content: space-between;  align-items: center;  padding: 0 24px;}/* メインエリアのカード: Grid */.card-list {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  gap: 20px;}/* カード内部: Flexbox */.card-content {  display: flex;  flex-direction: column;  gap: 12px;}

ポイント：「行と列の両方を制御したい」→ Grid、「1方向に並べたい」→ Flexbox、と覚えておけば迷いません。どちらか一方だけで無理に組もうとせず、適材適所で使い分けましょう。