【CSS】Grid Layoutの使い方まとめ！2列レイアウトやレスポンシブ対応など

Webサイトのレイアウトを組む際、かつては float を使い、その後 Flexbox が主流となりました。

そして現在、より複雑で自由自在なレイアウトを実現するために欠かせないのが 「CSS Grid Layout（グリッドレイアウト）」 です。

「Flexboxがあれば十分では？」
「Gridはプロパティが多くて難しそう……」

そう感じる方も多いかもしれませんが、Grid Layoutを習得すると、これまで複雑な計算やネスト（入れ子）が必要だったレイアウトが、驚くほどシンプルなコードで実現できるようになります。

特に「2次元（縦と横）」を同時に制御できる点は、Flexboxにはない強力なメリットです。

この記事では、CSS Grid Layoutの基本的な使い方から、便利な fr 単位や repeat() 関数、そしてメディアクエリを使わずにレスポンシブ対応する応用テクニックまで、サンプルコード付きで徹底的に解説します。

【本記事の信頼性】

執筆者：マヒロ

執筆者は元エンジニア
SES⇒大手の社内SE⇒独立
現在はこじんまりとしたプログラミングスクールを運営
モットーは「利他の精神」

CSS Grid Layoutとは？Flexboxとの決定的な違い
1. 使い分けのイメージ
Grid Layoutの基本手順：コンテナとアイテムを作成
1. 基本的な書き方（2列×2行を作る）
便利な単位「fr」と関数「repeat」を使いこなす
1. 比率で指定する「fr」単位
2. 繰り返しを省略する「repeat()」関数
アイテムの配置と結合：grid-column / grid-row
1. セルの結合方法
余白と配置：gapと中央寄せテクニック
1. 要素間の余白を一括指定する「gap」
2. 上下左右の中央寄せ（place-items）
【応用】レスポンシブ対応！メディアクエリなしで折り返す方法
1. 最強のレスポンシブ・グリッド設定
HTML/CSSのスキルを活かして年収を上げる方法

CSS Grid Layoutとは？Flexboxとの決定的な違い

CSS Grid Layoutは、その名の通りウェブページを「格子状（グリッド）」に分割して要素を配置する手法です。

よく比較されるFlexboxとの最大の違いは、「並べる方向」にあります。

Flexbox（1次元）：「横」または「縦」のどちらか一方に並べるのが得意。要素の順序や一列の配置に強い。
Grid Layout（2次元）：「横」と「縦」を同時に制御できる。行と列を組み合わせたタイル状のレイアウトや、複雑なエリア分けが得意。

使い分けのイメージ

ナビゲーションバーのように「横一列に並べる」だけならFlexboxが手軽ですが、「カード型レイアウト」や「ヘッダー・サイドバー・メイン・フッターを含むページ全体のレイアウト」を組むなら、Grid Layoutの方が圧倒的に効率的です。

Grid Layoutの基本手順：コンテナとアイテムを作成

Grid Layoutを使うための第一歩は、親要素（コンテナ）に対して display： grid; を指定することです。

これだけで、その子要素（アイテム）はグリッドのルールに従って配置されるようになります。

基本的な書き方（2列×2行を作る）

まずは、親要素にグリッドを定義し、縦と横のサイズを指定してみましょう。

<div class="grid-container">
  <div class="item">Box 1</div>
  <div class="item">Box 2</div>
  <div class="item">Box 3</div>
  <div class="item">Box 4</div>
</div>

<style>
.grid-container {
  display: grid;
  /* 縦列（カラム）の定義：幅200pxの列を2つ作る */
  grid-template-columns: 200px 200px;
  /* 横行（ロウ）の定義：高さ100pxの行を2つ作る */
  grid-template-rows: 100px 100px;
  
  /* 見やすくするための装飾 */
  background-color: #eee;
  gap: 10px; /* 要素間の隙間 */
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}
</style>

親要素である .grid-container に display： grid; を指定しました。

そして、grid-template-columns で「列の幅」を、grid-template-rows で「行の高さ」を定義しています。

ここでは 200px 200px と指定しているため、「幅200pxの列が2つ」生成されます。
子要素（Box 1〜4）は自動的にそのマス目に流し込まれます。

便利な単位「fr」と関数「repeat」を使いこなす

Grid Layoutには、従来の px や % 以外に、グリッド専用の便利な単位や関数が用意されています。
これらを使うことで、柔軟なレイアウトが可能になります。

比率で指定する「fr」単位

fr（fraction：断片・比率）は、「余ったスペースを配分する」ための単位です。

1fr 1fr と指定すれば、親要素の幅を 1：1 で等分します。
1fr 2fr ならば 1：2 の割合になります。

.grid-container {
  display: grid;
  /* 左側は1の割合、右側は2の割合で幅を確保 */
  grid-template-columns: 1fr 2fr;
}

画面幅が変わっても比率を保って伸縮するため、レスポンシブデザインと非常に相性が良い単位です。

繰り返しを省略する「repeat()」関数

「同じ幅の列を5つ作りたい」といった場合に、1fr 1fr 1fr 1fr 1fr と書くのは大変です。
そんな時は repeat() 関数を使います。

.grid-container {
  display: grid;
  /* 1frの列を3回繰り返す（3列の等幅グリッド） */
  grid-template-columns: repeat(3, 1fr);
}

これで「3カラムのレイアウト」が一瞬で完成します。

アイテムの配置と結合：grid-column / grid-row

Excelのセル結合のように、「このアイテムだけ2列分使いたい」「縦に2行分ぶち抜きたい」という場合は、子要素（アイテム）側で指定を行います。

セルの結合方法

指定には、グリッドの「ライン（線）の番号」を使います。
例えば3列のグリッドがある場合、線の番号は左から順に 1, 2, 3, 4 となります。

.item-1 {
  /* 横方向：ライン1からライン3まで（つまり2列分）結合 */
  grid-column: 1 / 3;
  
  /* 縦方向：ライン1からライン2まで（通常通り1行分） */
  grid-row: 1 / 2;
}

grid-column プロパティに対し、開始ライン / 終了ライン の形式で指定します。

1 / 3 とすることで、1本目の線から3本目の線までのエリア、すなわち「2つのセル」を占有することになります。

「全幅（フルワイド）にしたい」という場合は、終了ラインに -1（一番右の線）を指定するテクニックもよく使われます（例：grid-column： 1 / -1;）。

余白と配置：gapと中央寄せテクニック

要素同士の間隔や、マス目の中での位置揃えも、Gridなら非常にシンプルに記述できます。

要素間の余白を一括指定する「gap」

FlexboxやGridでは、margin を計算しなくても gap プロパティだけで要素間の隙間を作れます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  /* 縦横ともに20pxの隙間を空ける */
  gap: 20px;
  
  /* 縦と横を個別に指定する場合 */
  /* row-gap: 20px; */
  /* column-gap: 10px; */
}

上下左右の中央寄せ（place-items）

「マス目のど真ん中に要素を置きたい」という場合、Flexboxだと justify-content と align-items を書きますが、Gridなら place-items ひとつで完結します。

.grid-container {
  display: grid;
  place-items: center; /* 子要素を上下左右中央に配置 */
}

これは親要素全体の中央寄せ設定ですが、子要素ごとに align-self や justify-self を指定して個別に位置を調整することも可能です。

【応用】レスポンシブ対応！メディアクエリなしで折り返す方法

通常、レスポンシブ対応（スマホ対応）をするには @media を使ってCSSを書き換えますが、Grid Layoutの auto-fit と minmax を組み合わせると、画面幅に合わせて「入るだけ並べる（入りきらなければ折り返す）」という挙動を自動化できます。

最強のレスポンシブ・グリッド設定

.grid-responsive {
  display: grid;
  /* 最小200px、最大1fr（余白があれば広がる）の列を、入るだけ繰り返す */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

この1行は「カード型レイアウト」などで非常に強力です。

minmax(200px, 1fr)：「最低でも200pxは確保するけど、余裕があれば1frまで広げていいよ」という指定です。

auto-fit：画面幅に合わせて、上記の条件を満たすカラムを「可能な限り詰め込む」設定です。

これにより、PCのような広い画面では4列や5列に、タブレットでは3列に、スマホでは1列にと、画面幅に応じて自動的に列数が変動するレイアウトが実現します。