💡 記事の下にエディタを用意しています。壊してもOK！

更新日: 2026年5月31日

CSS Gridで3列レイアウトを作る方法

📌

結論

display: grid + grid-template-columns で格子状レイアウトが作れます

CSS Gridは2次元レイアウトの決定版です。

📝 実際のコードはこちら

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

これで子要素が3列に等分されて並びます。

frとは

fr はfraction（分数）の略で、**残りの空間を等分する単位**です。

指定	意味
`1fr 1fr 1fr`	3等分
`2fr 1fr`	2:1の比率
`200px 1fr`	左200px固定、右は残り全部

Grid vs Flexbox

特徴	Flexbox	Grid
次元	1次元	2次元
得意	横並び、中央寄せ	カード一覧、ダッシュボード
行と列	片方だけ制御	同時に制御

まとめ

・display: grid で格子状レイアウト・grid-template-columns で列数を指定・fr 単位で柔軟に分割・gap で間隔を指定

演習で試してみよう

CSS Gridで3列のレイアウトを作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

試してみる一覧ページで解く →

■ 演習

親divをGridにして、子要素を3列に並べてください。

詰まったらヒント

display: grid; grid-template-columns: 1fr 1fr 1fr;

20pt

Gridで3列

親divをGridにして、子要素を3列に並べてください。

コード

<div class="grid"><div>1</div><div>2</div><div>3</div></div>

プレビュー

エラー一覧・コンソール

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説

この演習を深掘りする

「Gridで3列」は初級レベルのHTML/CSS/JS演習です。親divをGridにして、子要素を3列に並べてください。この課題は、ブラウザ内エディタでその場実行でき、正誤判定も自動で行われます。

Gridで格子状のレイアウトが作れます。実務では同様のパターンがコードレビューやUI実装の現場で繰り返し登場します。

学習ロードマップ「layout」とセットで進めると、インプット→アウトプットの循環が作れます。演習#38はカテゴリ「css-layout」の中核スキルを固める位置づけです。

取り組み手順（ステップバイステップ）

ページ上部の解説記事を読み、「Gridで3列」のゴールを把握する
エディタのHTML/CSS/JS欄を確認し、スターターコードから書き始める
詰まったらヒントを開き、解答例と見比べながら差分を埋める
「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
正解判定では「grid」「grid-template-columns」などが含まれることを確認します。
正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み解き方

解答コードでは div, style などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。 CSSでは display、grid-template-columns、gap などのプロパティが指定されています。セレクタとプロパティ名のスペルに注意してください。解説: Gridで格子状のレイアウトが作れます。ヒントの要点: display: grid; grid-template-columns: 1fr 1fr 1fr;

実務・転職でどう活きるか

Flexbox/Gridはダッシュボード、カードUI、レスポンシブナビの実務標準です。求人票の「モダンCSS」要件の多くがここに該当します。

よくある間違い

ヒントを読まずに解答を見る: display: grid; grid-template-columns: 1fr 1fr 1fr;
Flexboxの親にdisplay:flexを付け忘れ
justify-contentとalign-itemsの使い分けミス
固定pxだけでレスポンシブ未対応

トラブルシューティング

実行してもプレビューが変わらない: HTML/CSS/JSの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない: 正解判定では「grid」「grid-template-columns」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る: DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい: 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・面接で話せるポイント

「Gridで3列」で扱う技術を自分の言葉で30秒説明できるようにしておく
解答コードの各行が何をしているか、面接官に白板で説明する練習をする
HTMLタグ（div, style）の意味とアクセシビリティ上の注意点を説明できる
CSSプロパティ（display, grid-template-columns, gap）の役割と代替手段を説明できる
「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

用語集

Flexbox: 1次元レイアウト（横または縦）のCSSモジュール。
Grid: 2次元レイアウト（行と列）のCSSモジュール。
gap: Flex/Gridの子要素間隔。

このページで扱うキーワード

このページは「Gridで3列」「css-layout」「初級」「div」「style」「display」「grid-template-columns」「gap」「grid 3 columns」などのキーワードで検索される方に向けた、Gridで3列の無料演習・解説です。

学習ロードマップ

学習ロードマップ →

よくある質問（FAQ）

Gridで3列は無料ですか？

この演習は完全無料で、ブラウザだけで完結します。アカウント登録やクレジットカードは不要です。

難易度と所要時間は？

「Gridで3列」は難易度「初級」です。解説記事を読んでから取り組めば、プログラミング未経験でも30分以内に解ける設計になっています。 1問あたり5〜15分が目安です。詰まったらヒント→解答の順で確認してください。

正解後は何をすればいい？

正解したら「次の問題」リンクから続けてください。同カテゴリを一通り終えたら、学習ロードマップの次ステップへ進むのがおすすめです。

スマホでもできますか？

スマートフォンのブラウザでもエディタとプレビューは動作します。ただしコード入力はPCの方が快適です。

他の演習はどこ？

演習一覧は/learn/から。カテゴリ・難易度でフィルターできます。

「Gridで3列」で覚えるポイントは？

Gridで格子状のレイアウトが作れます。ヒント: display: grid; grid-template-columns: 1fr 1fr 1fr;

CSSレイアウトカテゴリの位置づけは？

Flexbox/Gridはダッシュボード、カードUI、レスポンシブナビの実務標準です。求人票の「モダンCSS」要件の多くがここに該当します。

「Gridで3列」の具体的な手順は？

1. ページ上部の解説記事を読み、「Gridで3列」のゴールを把握する
2. エディタのHTML/CSS/JS欄を確認し、スターターコードから書き始める
3. 詰まったらヒントを開き、解答例と見比べながら差分を埋める
4. 「実行」ボタンでプレビュー／コンソールを確認し、期待どおりの表示になるかテストする
5. 正解判定では「grid」「grid-template-columns」などが含まれることを確認します。
6. 正解後は前後の演習リンクから続けて取り組み、同カテゴリを通しで完成させる

解答コードの読み方は？

解答コードでは div, style などのHTMLタグが使われています。タグの入れ子と閉じタグの対応を確認しましょう。

CSSでは display、grid-template-columns、gap などのプロパティが指定されています。セレクタとプロパティ名のスペルに注意してください。

解説: Gridで格子状のレイアウトが作れます。

ヒントの要点: display: grid; grid-template-columns: 1fr 1fr 1fr;

うまくいかないときは？

実行してもプレビューが変わらない → HTML/CSS/JSの編集欄を触っているか確認し、実行ボタンを押したあと数秒待ってから再確認してください。
正解なのに判定が通らない → 正解判定では「grid」「grid-template-columns」などが含まれることを確認します。全角スペースやtypo、タグの閉じ忘れを疑ってください。
コンソールにエラーが出る → DevToolsのConsoleタブで行番号を確認し、括弧・引用符の対応を見直します。
スマホで入力しづらい → 横画面にするか、PCブラウザで同じURLを開くと快適です。進捗はlocalStorageに保存されます。

転職・ポートフォリオでどうアピールする？

「Gridで3列」で扱う技術を自分の言葉で30秒説明できるようにしておく解答コードの各行が何をしているか、面接官に白板で説明する練習をする HTMLタグ（div, style）の意味とアクセシビリティ上の注意点を説明できる CSSプロパティ（display, grid-template-columns, gap）の役割と代替手段を説明できる「なぜこの実装方法を選んだか」「別解はあるか」を必ず1つ用意する

この演習の前提知識は？

学習ロードマップの該当章を読んでおくとスムーズです。

スターターコードは変更していい？

はい。動けばOKですが、まずはスターターを理解してから差分だけ足すと学習効率が上がります。

点数（pt）の意味は？

20ptは難易度の目安です。合計点を競う必要はなく、理解度を測る指標として使ってください。

ツール一覧