Grid 2カラムを理解すると「左右にきれいに分けるレイアウト」が一瞬で作れる
CSS Grid の 2 カラムレイアウトは、
「左に画像・右にテキスト」「左にラベル・右に入力欄」「2カラムのカード一覧」
など、Webデザインで最もよく使うパターンのひとつです。
Flexbox でも似たことはできますが、
Grid の方が “列幅のコントロール” が圧倒的に直感的 です。
ここでは、CSS と Tailwind CSS の両方で、初心者でも迷わないように丁寧に解説します。
Grid 2カラムの基本構造
grid-template-columns を使って「列の幅」を決める
.grid-2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
<div class="grid-2col">
<div>左カラム</div>
<div>右カラム</div>
</div>
Tailwind 版
<div class="grid grid-cols-2 gap-4">
<div>左カラム</div>
<div>右カラム</div>
</div>
grid-cols-2 が「2カラム」を意味します。
2カラムの幅を「均等」にする
CSS 版
grid-template-columns: 1fr 1fr;
Tailwind 版
<div class="grid grid-cols-2 gap-4">
fr は “残りのスペースを分け合う” 単位で、
1fr + 1fr → 均等幅になります。
2カラムの幅を「比率」で変える（1:2 や 30%:70%）
CSS 版（比率）
grid-template-columns: 1fr 2fr;
Tailwind 版（任意値）
<div class="grid grid-cols-[1fr_2fr] gap-4">
CSS 版（パーセント）
grid-template-columns: 30% 70%;
Tailwind 版
<div class="grid grid-cols-[30%_70%] gap-4">
深掘りポイント
Flexbox では「比率のカラム」を作るのが少し面倒ですが、
Grid なら grid-template-columns に書くだけで完了します。
例1：画像＋テキストの2カラム
CSS 版
.feature {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 24px;
}
<div class="feature">
<img src="photo.jpg" alt="">
<div>
<h3>タイトル</h3>
<p>説明テキストが入ります。</p>
</div>
</div>
Tailwind 版
<div class="grid grid-cols-[1fr_2fr] gap-6">
<img src="photo.jpg" class="w-full rounded">
<div>
<h3 class="text-xl font-semibold mb-2">タイトル</h3>
<p class="text-gray-600">説明テキストが入ります。</p>
</div>
</div>
例2：フォームのラベル＋入力欄を2カラムで揃える
CSS 版
.form-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 12px;
}
<div class="form-row">
<label>メール</label>
<input type="email">
</div>
Tailwind 版
<div class="grid grid-cols-[120px_1fr] gap-3 items-center">
<label class="text-sm text-gray-700">メール</label>
<input class="border border-gray-300 rounded px-3 py-2">
</div>
ポイント
ラベルの幅を固定し、入力欄を可変にするのが定番パターンです。
例3：カード一覧を2カラムで並べる
CSS 版
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
Tailwind 版
<div class="grid grid-cols-2 gap-5">
<div class="p-4 bg-white rounded shadow">カード1</div>
<div class="p-4 bg-white rounded shadow">カード2</div>
<div class="p-4 bg-white rounded shadow">カード3</div>
<div class="p-4 bg-white rounded shadow">カード4</div>
</div>
repeat(2, 1fr) は「1fr を2つ繰り返す」という意味です。
例4：レスポンシブで「スマホ1カラム → PC2カラム」
Tailwind 版（最もよく使う）
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-white rounded shadow">カード1</div>
<div class="p-4 bg-white rounded shadow">カード2</div>
<div class="p-4 bg-white rounded shadow">カード3</div>
<div class="p-4 bg-white rounded shadow">カード4</div>
</div>
スマホでは1カラム、
画面幅が md（768px）以上になると2カラムになります。
深掘りポイント
Grid はレスポンシブ対応が非常に簡単で、
Tailwind のブレークポイントと組み合わせると最強です。
Grid 2カラムの戦略的ポイント
1. 「左右の幅をどうしたいか」を最初に決める
- 均等 →
1fr 1fr - 左固定・右可変 →
200px 1fr - 比率 →
1fr 2fr - パーセント →
30% 70%
これを決めるだけで、レイアウトが一気に安定します。
2. gap で「カラム間の余白」を管理する
Grid は gap と相性が良く、
margin を使わずにきれいな余白が作れます。
3. Flexbox より「列幅のコントロール」が得意
Flexbox は「並べる・揃える」が得意、
Grid は「列幅を決める」が得意。
2カラムは Grid の得意分野です。
実践テンプレート：汎用2カラムレイアウト
<div class="grid grid-cols-[1fr_1fr] md:grid-cols-[1fr_2fr] gap-6">
<div class="bg-gray-100 p-4 rounded">左カラム</div>
<div class="bg-gray-100 p-4 rounded">右カラム</div>
</div>
スマホでは均等2カラム、
PCでは右側が広い2カラムに変化します。
まとめ
Grid の 2 カラムは、レイアウトの基礎として非常に強力です。
grid-template-columnsで列幅を決める1frで均等カラム- 固定幅＋可変幅も簡単
- Tailwind なら
grid-cols-2やgrid-cols-[1fr_2fr] - gap で余白管理が楽
- レスポンシブ対応も簡単
