CSS Grid入門｜display:gridの基本・fr単位・gap・レスポンシブをやさしく解説

Webページのレイアウトを組むとき、「サイドバーとメインを横に並べたい」「カードを3列のグリッドに整列させたい」と思ったことはないでしょうか。こうした二次元（行と列）のレイアウトを直感的に実現できるのがCSS Gridです。かつてはfloatやテーブルレイアウトで無理やり組んでいた配置が、Grid を使えば数行のCSSで、しかも崩れにくく書けるようになります。本記事では、CSS Gridとは何かという基礎から、実務で使う主要なプロパティ、レスポンシブ対応までを順を追って解説します。

CSS Gridとは何か

CSS Grid Layout（グリッドレイアウト）とは、要素を行（row）と列（column）からなる格子状の枠組みに沿って配置するためのCSSの仕組みです。親要素を「グリッドコンテナ」にすると、その直下の子要素（グリッドアイテム）が、定義したマス目に従って並びます。

最大の特徴は、縦と横の両方向を同時に制御できる二次元レイアウトである点です。後述するFlexboxが基本的に一方向（行または列のどちらか）を得意とするのに対し、Gridは「3列×2行の表のような配置」をそのまま表現できます。ページ全体の骨格づくりから、カード一覧やギャラリーの整列まで、幅広い場面で活躍します。

現在ではモダンブラウザのほぼすべてがCSS Gridに対応しているため、安心して実務で使えます。具体的なコードを書く前に、まずはCSS Gridジェネレーターツールで列数や余白をスライダーやボタンで調整し、生成されるCSSを眺めてみると、どのプロパティが何を担うのかが視覚的につかめます。

display:gridとgrid-template-columns/rows

Gridを始める第一歩は、親要素にdisplay: gridを指定することです。これだけでその要素はグリッドコンテナになります。続いて、列の構成をgrid-template-columns、行の構成をgrid-template-rowsで定義します。

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

上の例では「幅200pxの列を3つ」並べると宣言しています。コンテナの中に置いた子要素は、左上から順に1つずつマス目に収まっていきます。値の個数が列数になるため、100px 1fr と書けば2列、100px 100px 100px 100px と書けば4列です。

• grid-template-columns：各列の幅を、スペース区切りで並べて指定します。指定した数だけ列ができます。
• grid-template-rows：各行の高さを同様に指定します。省略した場合、行はコンテンツの量に応じて自動で高さが決まります。

幅の単位はpx（ピクセル）だけでなく、%（パーセント）やem、後述するfrなど自由に組み合わせられます。まずは「列の数＝値の数」という基本を押さえれば、グリッドの骨格は思いどおりに組めるようになります。

fr単位とgapで余白とサイズを整える

固定のpxだけで列幅を決めると、画面幅が変わったときに余りや不足が出てしまいます。そこで活躍するのがfr単位です。frは「fraction（分数）」の略で、コンテナの利用可能な空間を比率で分け合う単位です。

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

この例では、3つの列が 1：2：1 の比率で幅を分け合います。画面が広がっても狭まっても、この比率を保ったまま伸縮するため、レスポンシブと相性が抜群です。1fr 1fr 1fr とすれば、均等な3列になります。

列や行のすき間（溝）を作るにはgapプロパティを使います。gap: 16px のように1つの値を指定すると行と列の両方に同じ余白が入り、gap: 24px 16px のように2つ指定すると「行間24px・列間16px」と別々に設定できます。marginで一つずつ余白を調整する必要がなく、端には余計なすき間ができないため、カードの整列が非常にきれいに仕上がります。frとgapを組み合わせれば、「余白を保ちつつ残りを比率で分ける」柔軟なレイアウトが簡単に作れます。

grid-template-areasで配置を名前で指定する

ページの骨格（ヘッダー・サイドバー・メイン・フッターなど）を組むときに直感的なのがgrid-template-areasです。各領域に名前を付け、その名前を「絵を描くように」並べることでレイアウトを表現します。

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "side main"
    "footer footer";
}

そして各子要素に grid-area: header; のように名前を割り当てると、その要素が指定した領域に配置されます。文字列がそのまま画面の見取り図になっているため、コードを読むだけでレイアウトの全体像が把握できるのが大きな利点です。

• 同じ名前を横に並べると、その領域は列方向にまたがって結合します（上の例のheaderやfooter）。
• 同じ名前を縦に並べると、行方向にまたがって結合します。
• 空白のマスは .（ドット）で表します。

名前で配置できるため、レスポンシブ時にareasの定義だけを差し替えて、サイドバーを上下に動かすといった大胆な組み替えも簡単です。複雑な配置に挑戦したいときは、CSS Gridジェネレーターツールで領域を試しながら、出力されるareasの書き方を参考にすると理解が早まります。

repeat・minmax・auto-fitでレスポンシブにする

列の数が多いと 1fr 1fr 1fr 1fr のように書くのは面倒です。そこでrepeat()関数を使うと、repeat(4, 1fr) のように「同じ指定を何回繰り返すか」を簡潔に書けます。

さらに、画面幅に応じて列数を自動調整したいときに強力なのがminmax()とauto-fit（またはauto-fill）の組み合わせです。

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

この1行は、実務で最も使われるレスポンシブグリッドの定番です。意味を分解すると次のようになります。

この指定だけで、画面が広いときは1行に多くのカードが並び、狭いスマホでは自動的に1〜2列へと折り返してくれます。メディアクエリを書かずにレスポンシブが実現できるのが大きな魅力です。auto-fitは空いた列を詰めるのに対し、auto-fillは空のトラックを残すという違いがあるので、カードを左寄せで詰めたい場合は通常auto-fitを選びます。

Flexboxとの使い分け

レイアウトの定番には、Gridと並んでFlexboxがあります。どちらも強力ですが、得意分野が異なります。ざっくり言えば、Gridは二次元（行と列の両方）、Flexboxは一次元（行か列のどちらか）のレイアウトに向いています。

Gridは、ページの骨格や、整然と並べたいカードグリッドのように「枠を先に決めて中身を流し込む」場面で力を発揮します。一方Flexboxは、ナビゲーションのメニュー項目やボタンの横並び、要素を中央に寄せるといった「一列に並べて間隔を調整する」場面が得意です。どちらか一方だけを使う必要はなく、ページ全体はGridで組み、その中の小さなパーツはFlexboxで整えるという併用が実務では一般的です。

CSS Gridは、二次元のレイアウトを宣言的に、そして崩れにくく組める現代の標準技術です。まずはCSS Gridジェネレーターツールで列数・行数・gap・fr比率を実際に動かし、出力されるCSSと画面の変化を見比べてみてください。プロパティが目に見える形で理解でき、自分のコードに応用しやすくなります。

なお本記事は一般的な情報の提供を目的としたものです。CSSの仕様やブラウザの対応状況は変化するため、実装にあたっては最新の公式情報（MDNや仕様書など）を確認のうえ判断してください。