2026年4月16日
CSS グリッドとは？
ウェブページのレイアウトを「格子状（グリッド）」に組む方法が CSS グリッドです。新聞のような複数カラムのレイアウトや、写真ギャラリーのような均等な並びを簡単に作れます。
flexboxが「1方向（横か縦）」のレイアウトに強いのに対し、グリッドは「縦横2方向」を同時に制御できます。複雑なレイアウトはグリッドが得意です。
この記事では、CSS グリッドの使い方を初心者向けにわかりやすく解説します。
CSSの基本がまだ不安な人は「CSSとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。セレクタやプロパティの書き方がわかっていれば、グリッドの学習もスムーズに進みます。
グリッドを使うと、たとえば次のようなレイアウトが作れます。
- 写真ギャラリー（3列×2行の格子状）
- ブログのカード一覧（画面幅に応じて列数が変わる）
- ダッシュボード風のレイアウト（大きいパネルと小さいパネルの組み合わせ）
- ページ全体の構成（ヘッダー・サイドバー・メイン・フッター）
どれもグリッドを使えば、少ないコードで実現できます。
グリッドの基本：display: grid
グリッドを使うには、親要素に display: grid を指定します。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3列均等 */
gap: 24px; /* 列・行の間隔 */
}▶ プレビュー
grid-template-columns で列の数と幅を指定します。1fr は「利用可能なスペースを均等に分割する」単位です。
frとは？
fr（フラクション）は「余白を分割する」単位です。
/* 3列均等 */
grid-template-columns: 1fr 1fr 1fr;
/* 左1:右2の比率 */
grid-template-columns: 1fr 2fr;
/* 固定幅 + 残りを埋める */
grid-template-columns: 200px 1fr;👉 CSSカスタムプロパティも参考にしてください。
repeat()で列を繰り返す
同じ幅の列を複数作るときは repeat() を使うと短く書けます。
/* 4列均等（repeat使用） */
grid-template-columns: repeat(4, 1fr);
/* 画面幅に応じて自動で列数が変わる */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));auto-fit と minmax() を組み合わせると、画面幅に応じて列数が自動で変わるレスポンシブなグリッドが作れます。
auto-fitとauto-fillの違い
repeat()の中で使えるキーワードは2つあります。auto-fitとauto-fillです。
auto-fitは、アイテムが少ないとき余ったスペースを埋めるように引き伸ばします。たとえばアイテムが2つしかなくても、画面幅いっぱいに広がります。
auto-fillは、アイテムが少なくても空の列を確保します。アイテムは指定した最小幅のままで、余白が右側に残ります。
ほとんどの場合はauto-fitを使えば大丈夫です。アイテムが画面幅に合わせて自然に広がるので、見た目がきれいになります。
minmax()は「最小値と最大値」を指定する関数です。minmax(200px, 1fr)と書くと「最小200px、最大は余白を均等に分割」という意味になります。これにより、画面が狭いときは1列、広いときは3列や4列に自動で変わります。
このテクニックを使えば、メディアクエリを書かなくてもレスポンシブなレイアウトが作れます。レスポンシブデザインについて詳しく知りたい人は「レスポンシブデザイン入門」を読んでみてください。
行の高さを指定する
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px auto; /* 1行目200px、2行目は内容に合わせる */
gap: 16px;
}🔥 CSSセレクターの使い方で実践してみましょう。
grid-template-areasで名前をつけてレイアウトする
グリッドには「エリアに名前をつける」機能があります。grid-template-areasを使うと、レイアウトを文字で視覚的に表現できます。
たとえば、ヘッダー・サイドバー・メイン・フッターの4つのエリアがあるページを考えます。
grid-template-areasの書き方は次の通りです。
- "header header header"
- "sidebar main main"
- "footer footer footer"
各行がグリッドの1行に対応します。同じ名前を並べると、その分だけエリアが広がります。上の例では、headerとfooterは3列分の幅を使い、sidebarは1列、mainは2列を使います。
子要素にはgrid-areaプロパティで名前を指定します。たとえばgrid-area: header;と書くと、その要素がheaderエリアに配置されます。
この方法のメリットは、レイアウトの構造が一目でわかることです。コードを読むだけで「どこに何があるか」がすぐに理解できます。
grid-columnとgrid-rowで配置を指定する
個別のアイテムの配置を細かく指定したいときは、grid-columnとgrid-rowを使います。
grid-column: 1 / 3; と書くと「1列目から3列目の手前まで」つまり2列分の幅を使います。スラッシュの前が開始位置、後が終了位置です。
grid-row: 1 / 2; と書くと「1行目から2行目の手前まで」つまり1行分の高さを使います。
この機能を使うと、特定のアイテムだけ大きく表示できます。たとえば写真ギャラリーで、1枚目の写真だけ2列×2行の大きさにすることができます。
gapプロパティで間隔を調整する
グリッドアイテムの間隔を設定するにはgapプロパティを使います。gapは行と列の両方の間隔をまとめて指定できます。
gap: 16px; と書くと、行の間も列の間も16pxの間隔が空きます。
行と列で別々の間隔を指定したいときは、2つの値を書きます。gap: 24px 16px; と書くと、行の間隔が24px、列の間隔が16pxになります。
個別に指定するプロパティもあります。row-gapは行の間隔だけ、column-gapは列の間隔だけを設定します。
gapを使わない場合、marginで間隔を作ることになります。しかしmarginだと端の要素にも余白がついてしまい、調整が面倒です。gapなら要素と要素の「間」だけに間隔が入るので、シンプルに書けます。
ハンズオン：写真ギャラリーを作ろう
グリッドを使って、画面幅に応じて列数が変わる写真ギャラリーを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>グリッド練習</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
padding: 24px;
}
.card {
background-color: #0d9488;
color: white;
padding: 40px 16px;
border-radius: 12px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="gallery">
<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>
</body>
</html>ブラウザの幅を変えると、列数が自動で変わります。
💡 hoverで動きをつける方法で基礎を確認できます。
flexboxとグリッドの使い分け
| 場面 | おすすめ |
|---|---|
| ナビゲーションバー・ボタン並び | flexbox |
| カードの格子状並び・ページ全体のレイアウト | グリッド |
| 要素を中央に配置する | どちらでもOK |
もう少し詳しく使い分けを説明します。
flexboxは「1列に並べる」のが得意です。ナビゲーションのリンクを横に並べたり、ボタンを横に並べたりするときに使います。方向は横でも縦でも選べますが、基本は1方向です。
グリッドは「格子状に並べる」のが得意です。カードを3列×2行に並べたり、ページ全体をヘッダー・メイン・サイドバー・フッターに分けたりするときに使います。縦と横の両方を同時に制御できます。
迷ったときの判断基準はシンプルです。「1列（または1行）に並べるだけ」ならflexbox。「縦横の両方を意識する」ならグリッドを選びましょう。
flexboxの詳しい使い方は「Flexboxレイアウト入門」で学べます。グリッドと合わせて使いこなせると、どんなレイアウトでも作れるようになります。
グリッドのデバッグ方法
グリッドがうまく表示されないとき、ブラウザの開発者ツールが役立ちます。
ChromeやEdgeの場合、F12キーで開発者ツールを開きます。要素タブでグリッドコンテナを選ぶと、「grid」というバッジが表示されます。このバッジをクリックすると、ページ上にグリッドの線が表示されます。
グリッド線が表示されると、次のことが確認できます。
- 列と行がいくつあるか
- 各セルの大きさはどのくらいか
- アイテムがどのセルに配置されているか
- gapの大きさは正しいか
「思った通りに並ばない」ときは、まずグリッド線を表示してみましょう。列の数や幅が意図通りか確認するだけで、原因がわかることが多いです。
グリッドでよくある失敗と対策
グリッドを使い始めたとき、よくある失敗を紹介します。
失敗1：display: gridを子要素に書いてしまう
display: grid;は親要素（コンテナ）に書きます。子要素に書いてもグリッドにはなりません。横並びにならないときは、まず親要素を確認しましょう。
失敗2：grid-template-columnsのスペルミス
columnsのスペルを間違えると、グリッドが効きません。「columns」の「u」を忘れて「colmns」と書いてしまうミスが多いです。効かないときはスペルを確認しましょう。
失敗3：frとpxを混ぜたときの計算ミス
「200px 1fr 1fr」と書いたとき、1frは「画面幅から200pxを引いた残り」を2等分します。思ったより狭くなることがあるので、ブラウザで確認しながら調整しましょう。
失敗4：アイテム数と列数が合わない
3列のグリッドにアイテムが5つあると、最後の行は2つだけになります。これは正常な動作です。空いたスペースが気になる場合は、最後のアイテムにgrid-column: span 2;を指定して2列分に広げる方法があります。
失敗5：高さが揃わない
グリッドアイテムの中身の量が違うと、高さがバラバラに見えることがあります。実はグリッドでは同じ行のアイテムは自動で高さが揃います。揃わないように見える場合は、背景色やボーダーを確認してみましょう。
まとめ
- ✅
display: gridでグリッドコンテナを作る - ✅
grid-template-columnsで列の数と幅を指定する - ✅
1frは余白を均等に分割する単位 - ✅
repeat(auto-fit, minmax(200px, 1fr))でレスポンシブなグリッドが作れる - ✅
gapで列・行の間隔を指定する
グリッドを使いこなすと、複雑なレイアウトも簡単に作れます。レッスンでさらに詳しく学んでみましょう。
🎮 CSS Gridを実際に動かしてみよう！
grid-template-columns/rows をスライダーで操作してリアルタイム確認。開発者ツール不要の無料ツールです。
CSS Grid ビジュアライザー →