CSS Tips | 超実務コアCSSテクニック：レイアウト基礎 － Grid 3カラム

Web APP CSS
スポンサーリンク

Grid 3カラムを理解すると「カード一覧・3分割レイアウト」が一気に楽になる

3カラムレイアウトは、カード一覧、サービス紹介、ブログ一覧などでめちゃくちゃよく使います。
Flexbox でも組めますが、「列の数」と「幅」をコントロールするなら Grid が圧倒的にわかりやすいです。

ここでは、CSS と Tailwind CSS の両方で、
「まずはこれだけ押さえればOK」という実戦的な 3 カラムパターンをかみ砕いて解説します。

Grid 3カラムの基本構造

CSSでの基本形

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
CSS
<div class="grid-3col">
  <div>カラム1</div>
  <div>カラム2</div>
  <div>カラム3</div>
</div>
HTML

repeat(3, 1fr) は「1fr を3つ並べる」＝均等3カラムです。

Tailwindでの基本形

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4 rounded">カラム1</div>
  <div class="bg-gray-100 p-4 rounded">カラム2</div>
  <div class="bg-gray-100 p-4 rounded">カラム3</div>
</div>
HTML

grid-cols-3 が「3カラム」を意味します。

パターン1：均等幅の3カラムカード一覧

CSS版

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
CSS
<div class="cards">
  <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>
HTML

Tailwind版

<div class="grid grid-cols-3 gap-5">
  <div class="bg-white p-4 rounded-lg shadow">カード1</div>
  <div class="bg-white p-4 rounded-lg shadow">カード2</div>
  <div class="bg-white p-4 rounded-lg shadow">カード3</div>
  <div class="bg-white p-4 rounded-lg shadow">カード4</div>
  <div class="bg-white p-4 rounded-lg shadow">カード5</div>
  <div class="bg-white p-4 rounded-lg shadow">カード6</div>
</div>
HTML

ここでは「列数」と「余白」を Grid に任せていて、
カード側は「中身のデザイン」だけに集中できています。
この役割分担が、Grid を使う大きなメリットです。

パターン2：左右細く・中央広く（1:2:1 レイアウト）

CSS版

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}
CSS
<div class="layout">
  <aside>左サイド</aside>
  <main>メインコンテンツ</main>
  <aside>右サイド</aside>
</div>
HTML

Tailwind版

<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
  <aside class="bg-gray-100 p-4 rounded">左サイド</aside>
  <main class="bg-white p-4 rounded shadow">メインコンテンツ</main>
  <aside class="bg-gray-100 p-4 rounded">右サイド</aside>
</div>
HTML

grid-cols-[1fr_2fr_1fr] のように、
Tailwind では任意値で列幅をそのまま書けます。

パターン3：固定幅＋可変幅＋固定幅

CSS版

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 16px;
}
CSS
<div class="layout">
  <aside>左ナビ（200px固定）</aside>
  <main>メイン（残り全部）</main>
  <aside>右パネル（200px固定）</aside>
</div>
HTML

Tailwind版

<div class="grid grid-cols-[200px_1fr_200px] gap-4">
  <aside class="bg-gray-100 p-4">左ナビ</aside>
  <main class="bg-white p-4 rounded shadow">メイン</main>
  <aside class="bg-gray-100 p-4">右パネル</aside>
</div>
HTML

「両サイド固定・中央可変」は管理画面やダッシュボードでよく出てくる形です。

パターン4：レスポンシブ（スマホ1 → タブレット2 → PC3）

Tailwind版（実戦でめちゃくちゃ使う）

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white p-4 rounded shadow">カード1</div>
  <div class="bg-white p-4 rounded shadow">カード2</div>
  <div class="bg-white p-4 rounded shadow">カード3</div>
  <div class="bg-white p-4 rounded shadow">カード4</div>
  <div class="bg-white p-4 rounded shadow">カード5</div>
  <div class="bg-white p-4 rounded shadow">カード6</div>
</div>
HTML

スマホ：1カラム
タブレット：2カラム
PC：3カラム

という、「とりあえずこれにしておけば破綻しない」鉄板パターンです。

Grid 3カラムで大事な考え方

1. 「列の数」と「列の幅」をまず決める

Grid はここがすべてです。

  • 均等3カラム → grid-template-columns: repeat(3, 1fr);
  • 比率で分ける → 1fr 2fr 1fr
  • 固定＋可変 → 200px 1fr 200px

Tailwind なら grid-cols-3 や grid-cols-[...] で表現します。

2. gap で「カラム間の余白」を一括管理する

Grid は gap と相性抜群です。

<div class="grid grid-cols-3 gap-6">
HTML

と書くだけで、
横も縦もきれいに同じ余白になります。

3. Flexbox との役割分担を意識する

  • Grid → 「列の数・幅・全体の骨組み」を決める
  • Flexbox → 「中身の並べ方（アイコン＋テキスト、ボタンの並びなど）」を整える

という分担にすると、CSS がかなりスッキリします。

実践テンプレート：3カラムカードセクション

<section class="max-w-5xl mx-auto px-4 py-10">
  <h2 class="text-2xl font-bold mb-6">サービス一覧</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">プランA</h3>
      <p class="text-sm text-gray-600">シンプルなプランです。</p>
      <button class="mt-auto self-start px-3 py-1.5 text-sm bg-blue-600 text-white rounded">
        詳細を見る
      </button>
    </div>
    <div class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">プランB</h3>
      <p class="text-sm text-gray-600">標準的なプランです。</p>
      <button class="mt-auto self-start px-3 py-1.5 text-sm bg-blue-600 text-white rounded">
        詳細を見る
      </button>
    </div>
    <div class="bg-white p-5 rounded-xl shadow flex flex-col gap-3">
      <h3 class="text-lg font-semibold">プランC</h3>
      <p class="text-sm text-gray-600">拡張機能が豊富なプランです。</p>
      <button class="mt-auto self-start px-3 py-1.5 text-sm bg-blue-600 text-white rounded">
        詳細を見る
      </button>
    </div>
  </div>
</section>
HTML

ここでは
「外側のレイアウト」＝ Grid
「カードの中身」＝ Flex（flex flex-col gap-3）
というきれいな分業になっています。

まとめ

Grid 3カラムは、レイアウト基礎の中でもかなり“コスパの良い”テクニックです。

  • 均等3カラム → grid-cols-3 / repeat(3, 1fr)
  • 比率や固定幅も grid-template-columns で直感的に書ける
  • gap で余白管理がシンプル
  • Tailwind のブレークポイントと組み合わせるとレスポンシブが楽

スポンサーリンク
タイトルとURLをコピーしました