MENU
無料Webアプリ、Webコーディング事例集、PC・IT用語Wiki、EC-CUBEカスタマイズなど
  1. ホーム
  2. プログラミング
  3. HTML/CSS/JavaScript
  4. CSS Grid 完全解説｜CSS Grid Interactive Guide

CSS Grid 完全解説｜CSS Grid Interactive Guide

HTML/CSS/JavaScript

デモで学ぶ CSS Grid 全プロパティ

グリッドレイアウトの基本から、行・列の指定、セル結合、レスポンシブ対応まで、各プロパティの動作をボタン操作で確認しながらすぐに使えるHTML・CSSのコードをコピーできます。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。

関連: CSSグリッドとは？ Flexboxとは？ レスポンシブデザインとは？

① display: grid — 列数を指定してグリッド化する

1
2
3
4
5
6

grid-template-columns: repeat(3, 1fr)

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
display: grid

親要素に指定すると、子要素が自動的にグリッドの升目に配置されます。何列にするかは grid-template-columns で指定します。

repeat(3, 1fr) の意味

「1fr の幅の列を3つ繰り返す」という意味です。grid-template-columns: 1fr 1fr 1fr; と書いたのと同じ結果になりますが、repeat() を使うと列数が増えても書き換えが簡単です。

② grid-template-columns — 列幅の比率を変える（fr単位）

A
B
C

grid-template-columns: 1fr 1fr 1fr

HTML
<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
fr単位 — 余った幅を比率で分配

fr は「残りの幅をどの比率で分けるか」を表す単位です。2fr 1fr 1fr なら、幅を2:1:1の比率で3列に分割します。

pxとfrの混在も可能

100px 1fr 1fr のように固定幅とfrを組み合わせると、最初の列だけ固定幅にして残りを可変にする、といった実用的なレイアウトが作れます。

③ grid-template-rows — 行の高さを指定する

1
2
3
4
5
6

grid-template-rows: auto auto

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 22px 0;
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
grid-template-rows — 行の高さを指定

grid-template-columns と同じ書き方で、行の高さを指定できます。auto は内容に合わせた高さ、px は固定、fr は余白の比率分配です。

frを使うときは親要素の高さに注意

fr で行の高さを分配するには、親要素（コンテナ）に高さを指定しておく必要があります。高さが auto のままだと余白が生まれないため、fr が効果を発揮できません。

④ gap — セル間の余白を一括指定

1
2
3
4
5
6

gap: 0px

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
gap — 行間・列間をまとめて指定

margin で個別に余白を作らなくても、コンテナに gap を指定するだけで、セル同士の間隔を一括管理できます。

行間・列間を別々にしたいとき

gap は row-gap（行間）と column-gap（列間）をまとめて指定するショートハンドです。個別に変えたい場合はそれぞれのプロパティを使います。

⑤ grid-column — セルを横方向に結合する（span）

A
B
C
D

grid-column: span 1（通常）

HTML
<div class="container">
  <div class="box box-a">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box-a { background: linear-gradient(135deg, #06b6d4, #0284c7); grid-column: span 1; }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
grid-column: span N — 横方向にN列分結合

子要素に指定すると、そのセルが横方向に複数列を占有します。ヘッダーやバナーなど、幅広く見せたい要素によく使います。

grid-row: span N も同じ考え方

縦方向に複数行を結合したいときは grid-row: span N を使います。書き方は grid-column と同じです。

⑥ justify-items / align-items — セル内でのアイテムの配置

横 (justify-items)
縦 (align-items)
A
B
C
D

justify-items: start / align-items: start

HTML
<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 100px);
  justify-items: start;
  align-items: start;
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  width: 70px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4) { background: linear-gradient(135deg, #f97316, #c2410c); }
justify-items — セル内の横位置を一括指定

各セルの中で、アイテムを横方向のどこに配置するか指定します。初期値は stretch（幅いっぱいに広がる）です。start・center・end を指定すると、アイテム本来の幅で好きな位置に配置できます。

align-items — セル内の縦位置を一括指定

考え方は justify-items と同じで、対象が縦方向になります。特定の1アイテムだけ位置を変えたい場合は、justify-self / align-self を子要素に指定します。

⑦ grid-template-areas — エリア名でレイアウトを組む

header
sidebar
main
footer

レイアウト: PC（2カラム）

HTML
<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.header  { grid-area: header; background: linear-gradient(135deg, #06b6d4, #0284c7); }
.sidebar { grid-area: sidebar; background: linear-gradient(135deg, #ec4899, #be185d); }
.main    { grid-area: main; background: linear-gradient(135deg, #22c55e, #15803d); }
.footer  { grid-area: footer; background: linear-gradient(135deg, #f97316, #c2410c); }

.header, .sidebar, .main, .footer {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  padding: 16px 0;
}
grid-template-areas — 配置図をそのままコードに

各セルに grid-area で名前を付け、コンテナ側でその名前を並べて配置図のようにレイアウトを組みます。文字列の見た目が、そのまま画面上の配置と一致するのが特徴です。

HTMLの並び順を変えずにレイアウトを変更できる

ボタンを押すと、HTML の要素順はそのままに、grid-template-areas と grid-template-columns の書き換えだけでスマホ向けの縦並びに切り替わります。メディアクエリの中に書けば、そのままレスポンシブ対応になります。

⑧ repeat(auto-fit, minmax()) — メディアクエリ不要のレスポンシブグリッド

1
2
3
4
5
6

コンテナ幅を変えても、列数が自動で調整されます

HTML
<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>
CSS
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  background: #0f172a;
  padding: 14px;
  border-radius: 10px;
}

.box {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.box:nth-child(4n+1) { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.box:nth-child(4n+2) { background: linear-gradient(135deg, #ec4899, #be185d); }
.box:nth-child(4n+3) { background: linear-gradient(135deg, #22c55e, #15803d); }
.box:nth-child(4n+4) { background: linear-gradient(135deg, #f97316, #c2410c); }
minmax(90px, 1fr) — 最小幅と最大幅を同時に指定

「最小90px、余りがあれば1frで伸びる」という意味です。repeat(auto-fit, …) と組み合わせることで、コンテナの幅に収まる分だけ列数が自動的に増減します。

メディアクエリを書かずにレスポンシブ対応

画面幅ごとに @media で grid-template-columns を書き換える必要がありません。ブラウザが幅に応じて自動的に列数を計算してくれます。

⑨ 実用パターン — カードレイアウト（画像＋タイトル＋本文）

グリッドレイアウト入門

display: grid だけで実装できる基本パターン。

レスポンシブ対応

auto-fit と minmax() の組み合わせが便利。

エリア指定レイアウト

grid-template-areas で配置図通りに組む。

HTML
<div class="cards">
  <div class="card">
    <div class="card-thumb"></div>
    <p class="card-title">グリッドレイアウト入門</p>
    <p class="card-text">display: grid だけで実装できる基本パターン。</p>
  </div>
  <div class="card">
    <div class="card-thumb"></div>
    <p class="card-title">レスポンシブ対応</p>
    <p class="card-text">auto-fit と minmax() の組み合わせが便利。</p>
  </div>
  <div class="card">
    <div class="card-thumb"></div>
    <p class="card-title">エリア指定レイアウト</p>
    <p class="card-text">grid-template-areas で配置図通りに組む。</p>
  </div>
</div>
CSS
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.card {
  background: #1a1a2e;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-thumb {
  height: 90px;
  background: linear-gradient(135deg, #06b6d4, #0284c7);
}

.card-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 10px 12px 4px;
}

.card-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
  line-height: 1.6;
  margin: 0 12px 12px;
}
カードレイアウト — 最もよく使う実用パターン

ブログの記事一覧やギャラリー表示など、同じ形のカードを並べる場面で頻出のレイアウトです。repeat(auto-fit, minmax()) と組み合わせれば、画面幅に応じたレスポンシブ対応も自動で行われます。

Flexboxとの使い分け：
1次元（横一列 or 縦一列）の並びなら Flexbox、行と列を同時に組む2次元のレイアウトなら Grid が向いています。ページ全体の骨組みは Grid、その中のボタン配置などの細かい並びは Flexbox、という組み合わせもよく使われます。

関連記事

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい
Webデザイン・UIコンポーネント集（HTML/CSS/JS） HTML / CSS / JAVASCRIPT · 随時更新中 WebデザインとUI実装例集 Webサイトやアプリで使われるUIコンポーネント・デザインパターンをまとめました。それぞれのカ…
HTML/CSS/JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次