CSS Gridの使い方｜2列・レスポンシブ・repeat・grid-area・flexとの使い分け

CSS Gridは、行と列を使ってレイアウトを作るCSSです。

横並びだけならflexでも十分ですが、2列、3列、カード一覧、サイドバー付きレイアウト、エリアを名前で配置するレイアウトにはGridが向いています。

この記事では、CSS Gridの基本から、よく使う実践パターンまでまとめて解説します。

• CSS Gridの基本
• flexとの違いと使い分け
• 2列、3列、レスポンシブな列数可変レイアウト
• repeat()、minmax()、auto-fit の使い方
• grid-area と grid-template-areas の使い方
• Gridで中央寄せする方法
• Gridがうまくいかないときの確認ポイント

CSS Gridとは

CSS Gridは、親要素に display: grid; を指定して使います。

親要素がグリッドコンテナ、直下の子要素がグリッドアイテムになります。

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

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

grid-template-columns: 1fr 1fr; は、横に2列を作る指定です。

fr は、使える幅を分け合う単位です。

CSS Gridとflexの使い分け

Gridとflexはどちらもレイアウトに使えますが、得意なことが違います。

使いたい場面	おすすめ	理由
横一列に並べたい	flex	1方向の整列が得意
中央寄せしたい	flex または Grid	どちらでも書ける
カードを2列、3列で並べたい	Grid	列数を管理しやすい
行と列をまとめて管理したい	Grid	二次元レイアウトが得意
ヘッダーでロゴとメニューを横並びにしたい	flex	横方向の配置だけで足りる
ヘッダー、メイン、サイドバー、フッターを配置したい	Grid	エリア名で配置しやすい

迷ったら、1方向ならflex、縦横の2方向ならGridと考えるとわかりやすいです。

flexの詳しい使い方は、CSS flexの使い方 で解説しています。

Gridで2列レイアウトを作る

2列レイアウトは、次のように書きます。

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

左を広く、右を狭くしたい場合は、比率を変えます。

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

2fr 1fr は、左を2、右を1の割合で分ける指定です。

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

3列にしたい場合は、1fr を3つ並べます。

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

同じ値を繰り返す場合は、repeat() を使うと短く書けます。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

repeat(3, 1fr) は、1fr 1fr 1fr と同じ意味です。

Gridをレスポンシブ対応にする

スマホでは1列、PCでは3列にしたい場合は、メディアクエリで切り替えます。

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

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

この書き方はわかりやすく、初心者にも扱いやすいです。

列数可変のレスポンシブGrid

画面幅に合わせて列数を自動で変えたい場合は、repeat()、auto-fit、minmax() を組み合わせます。

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

この指定は、次のような意味です。

• カードの最小幅を240pxにする
• 空きがあれば 1fr で広げる
• 入る数だけ自動で列を作る
• 入らない場合は次の行へ回す

カード一覧やギャラリーでは、とても使いやすい書き方です。

auto-fitとauto-fillの違い

auto-fit と auto-fill は似ていますが、空の列の扱いが違います。

値	特徴	使いやすい場面
auto-fit	空の列をつぶして、要素を広げる	カードを自然に幅いっぱい広げたい
auto-fill	空の列も残す	列の枠を維持したい

実務では、まず auto-fit を使うことが多いです。

Gridで中央寄せする方法

Gridで要素を中央寄せするには、目的によって使うプロパティが変わります。

やりたいこと	CSS
各アイテムをセル内で中央寄せ	place-items: center;
グリッド全体を親の中央に置く	place-content: center;
横方向だけ中央	justify-items: center;
上下方向だけ中央	align-items: center;

上下左右中央にしたいだけなら、次のように書けます。

.center {
  display: grid;
  place-items: center;
  min-height: 240px;
}

place-items は、align-items と justify-items をまとめて指定するショートハンドです。

grid-areaの使い方

grid-area は、グリッド内の配置場所を指定するプロパティです。

初心者には、名前付きエリアで使う方法がわかりやすいです。

<div class="page-layout">
  <header class="header">ヘッダー</header>
  <main class="main">メイン</main>
  <aside class="sidebar">サイドバー</aside>
  <footer class="footer">フッター</footer>
</div>

.page-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  gap: 24px;
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

grid-template-areas でレイアウトの形を作り、各要素に grid-area で名前を割り当てています。

見た目の配置が文字列として読めるので、ページ全体のレイアウトに向いています。

grid-areaのショートハンド

grid-area は、行と列の番号で指定することもできます。

.item {
  grid-area: 1 / 1 / 3 / 3;
}

これは、次の順番です。

grid-area: row-start / column-start / row-end / column-end;

grid-area: 1 / 1 / 3 / 3; は、1行目・1列目から始まり、3行目・3列目の線まで広がるという意味です。

ただし、最初は番号指定よりも、名前付きエリアの方が読みやすいです。

grid-templateの基本

Gridでは、grid-template-columns と grid-template-rows で列と行を定義します。

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

よく使う値は次のとおりです。

値	意味
px	固定幅
%	親要素に対する割合
fr	残りの空間を分け合う
auto	中身に合わせる
minmax()	最小値と最大値を指定する
repeat()	同じ指定を繰り返す

Gridのサンプル集

よく使うGridレイアウトをまとめます。

画像ギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

メインとサイドバー

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
}

スマホで1列にしたい場合は、メディアクエリで切り替えます。

.layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

カード一覧

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

この形は、記事一覧、商品一覧、実績一覧などで使いやすいです。

CSSグリッドジェネレーターを使う前に知っておきたいこと

CSSグリッドジェネレーターは、列数や行数を視覚的に作れる便利なツールです。

ただし、生成されたCSSをそのまま貼るだけだと、レスポンシブ対応や余白調整で困ることがあります。

まずは次の指定を読めるようにしておくと、ジェネレーターで作ったコードも調整しやすくなります。

• display: grid;
• grid-template-columns
• grid-template-rows
• gap
• grid-area
• repeat() と minmax()

Gridがうまくいかないときの確認ポイント

Gridが思った通りにならないときは、次の順番で確認します。

1. display: grid; を親要素に指定しているか
2. 配置したい要素が親の直下にあるか
3. grid-template-columns の列数が想定通りか
4. gap と padding が重なっていないか
5. 長いテキストや画像が列幅を押し広げていないか
6. レスポンシブ時のメディアクエリが上書きされていないか

列がはみ出す場合は、minmax(0, 1fr) や min-width: 0; が必要になることがあります。

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
}

長い文字列の折り返しは、CSS displayの記事 も参考にしてください。

Gridのチートシート

よく使う指定をまとめます。

やりたいこと	CSS
Gridを有効にする	display: grid;
2列にする	grid-template-columns: 1fr 1fr;
3列にする	grid-template-columns: repeat(3, 1fr);
レスポンシブな可変列	repeat(auto-fit, minmax(240px, 1fr))
余白を作る	gap: 24px;
中央寄せ	place-items: center;
名前で配置する	grid-template-areas と grid-area

まとめ

CSS Gridは、行と列を使ってレイアウトを組みたいときに便利です。

この記事のポイントをまとめると、次のようになります。

• Gridは親要素に display: grid; を指定して使う
• 2列や3列は grid-template-columns で作る
• 同じ列を繰り返すなら repeat() を使う
• レスポンシブな列数可変には repeat(auto-fit, minmax()) が便利
• ページ全体の配置には grid-template-areas と grid-area が使いやすい
• 1方向の横並びはflex、2方向のレイアウトはGridが向いている

関連記事

• CSS flexの使い方｜横並び・中央寄せ・均等幅・折り返し・高さを揃える方法
• CSS displayの使い方｜インライン・ブロック・display: contentsまで解説
• HTMLのtableでtdが改行されない原因とCSSで折り返す方法

参考リンク

• MDN：CSS grid layout
• MDN：grid-template-columns
• MDN：repeat()
• MDN：minmax()
• MDN：grid-area