CSSグリッドレイアウトの基本と実装方法を徹底解説

公開日：2026-08-05

Webサイトを作るとき、「要素がなんとなくガタガタしてしまう」「情報量が多いページをすっきり整理できない」と感じたことはないでしょうか。こうした悩みを解決する代表的な手法が、CSSの「グリッドレイアウト」です。グリッドレイアウトを使うと、要素を行と列のマス目に沿って整列させ、レスポンシブ対応もしやすい効率的なレイアウトを組めるようになります。本記事では、グリッドレイアウトの基本概念からメリット、1次元レイアウトであるFlexboxとの違い、CSS Grid Layoutの主要プロパティ、実践的なコード例、レスポンシブ設計のコツ、デザインシステムへの応用まで、初心者からデザイナー・コーダーまで段階的に理解できるよう整理しました。

グリッドレイアウトとは？基本概念をやさしく解説

グリッドレイアウトとは、コンテンツを縦横のマス目（グリッド）に沿って配置するレイアウト手法です。雑誌や新聞のレイアウトでも古くから使われてきた考え方で、要素の大きさや位置を一定のルールに揃えることで、情報が整理された見やすいデザインを作ることができます。Webデザインの世界でも、写真・見出し・テキストといった要素をグリッドの単位（カラム）に沿って配置することで、統一感のあるレイアウトを効率的に構築できます。

Webデザインにおける「グリッド」の考え方

紙のデザインにおけるグリッドシステムは、ページを均等な列（カラム）に分割し、その列を基準に要素を配置する設計手法です。Webデザインでもこの考え方は受け継がれており、12カラムグリッドのようにページ全体を分割し、要素の幅や位置をカラム単位で決めていくのが一般的です。グリッドに沿って要素を配置すると、余白の取り方や要素同士の関係性に統一ルールが生まれるため、デザインの再現性が高まり、複数人でデザインを分担してもレイアウトが崩れにくくなるという利点があります。

CSS Grid Layoutの仕組み（行・列・グリッドアイテム）

CSSにおける「CSS Grid Layout」は、この紙のグリッドシステムの考え方をブラウザ上で実現するための仕組みです。親要素（グリッドコンテナ）にdisplay: gridを指定すると、その内側の子要素（グリッドアイテム）を行（row）と列（column）で構成されたマス目の中に自由に配置できるようになります。グリッドコンテナ・グリッドアイテム・グリッドライン（マス目の境界線）・グリッドトラック（行や列そのもの）といった用語を理解しておくと、以降の実装解説がスムーズに読み進められます。CSS Grid Layoutは2017年前後から主要ブラウザに実装が進み、現在ではモダンブラウザで広くサポートされている標準的なCSSレイアウト手法です（出典: MDN Web Docs）。

グリッドレイアウトを使う4つのメリット

グリッドレイアウトを採用すると、デザイン面・実装面の両方でさまざまな利点があります。ここでは代表的な4つのメリットを紹介します。

まず1つ目は、要素を整列しやすいという点です。グリッドレイアウトでは、あらかじめ定義した行・列のトラックに沿って要素が配置されるため、余白やサイズが感覚的にバラつくことがなく、デザインカンプ通りの整った見た目を再現しやすくなります。

2つ目は、情報量が多いWebサイトをすっきり整理できる点です。ECサイトの商品一覧やニュースサイトのように、写真・見出し・テキストといった性質の異なる要素が大量に並ぶページでは、グリッドの単位でコンテンツをブロック化することで、視線の流れを整理しながら情報を詰め込みすぎない設計がしやすくなります。

3つ目は、レスポンシブデザインに対応しやすい点です。従来のレイアウト手法では、画面幅ごとに細かくメディアクエリを書いて調整する必要がありましたが、グリッドレイアウトの機能を使うことで、メディアクエリの記述量を減らしながら画面幅に応じたカラム数の自動調整が可能になります。詳しくは後述の「レスポンシブデザインに強いグリッド設計のコツ」で解説します。

4つ目は、コーディングの効率化です。従来はレイアウトを組む際に、入れ子になったdiv要素やfloatプロパティを多用する手法が一般的でしたが、グリッドレイアウトでは親要素に対するプロパティ指定だけで複雑な2次元配置を実現できるため、HTMLの構造をシンプルに保ちながら、CSS側で見た目の配置をコントロールしやすくなります。結果として、コードの可読性・保守性が高まり、デザインの微調整もスピーディーに行えるようになります。

Flexboxとの違い｜1次元 vs 2次元レイアウト

CSSのレイアウト手法としてグリッドレイアウトとよく比較されるのが「Flexbox（Flexible Box Layout）」です。どちらも要素の配置をコントロールするためのCSSレイアウトモジュールですが、得意とする配置の次元が異なります。この違いを理解することが、CSSプロパティを適切に使い分けるための第一歩になります。

Flexboxが得意なこと

Flexboxは、要素を「1次元」、つまり横方向または縦方向のどちらか一方に並べることに特化したレイアウト手法です。ナビゲーションメニューの横並び、ボタンの整列、カード内の要素配置など、限られた範囲でアイテム同士の間隔や順序を柔軟に調整したい場面で力を発揮します。justify-contentやalign-itemsといったプロパティを使えば、要素の余白配分や中央揃えを直感的に指定できるのが特徴です。

Gridが得意なこと

一方でグリッドレイアウトは、行と列という「2次元」の軸を同時にコントロールできる点が最大の特徴です。ページ全体のレイアウト、複雑なカードグリッド、ヘッダー・サイドバー・メインコンテンツ・フッターといった大枠の構造など、縦横両方の配置を一括で管理したい場面に適しています。Flexboxで同じことを再現しようとすると、入れ子構造を重ねる必要が出てくるケースが多く、コードが複雑になりがちです。

併用パターン（Gridで全体、Flexboxで部品）

実務では、どちらか一方だけを使うのではなく、両方を組み合わせるのが一般的です。クリエイティブ用語辞典でも紹介されているように、ページ全体の大枠のレイアウトはグリッドレイアウトで組み、その内側にあるカードやナビゲーションといった部品単位の配置はFlexboxで整える、という役割分担が効率的です。「2次元レイアウトを自在にコントロールしたいのか」「1次元方向の間隔調整をしたいのか」を意識してプロパティを選ぶと、無駄のないCSS設計につながります。

CSS Grid Layoutの基本プロパティ一覧

ここからは、CSS Grid Layoutを実装する際に押さえておきたい基本プロパティを解説します。まずは全体像を把握し、次の章の実践コード例と合わせて理解を深めていきましょう。

display: grid / grid-template-columns, rows

グリッドレイアウトの起点となるのがdisplay: gridです。この宣言を親要素に指定するだけで、その要素はグリッドコンテナとなり、内側の子要素は自動的にグリッドアイテムとして扱われます。列の数と幅はgrid-template-columns、行の数と高さはgrid-template-rowsで指定します。fr単位は「利用可能なスペースを比率で分配する」ための単位で、グリッドレイアウトならではの表現方法です。

gap（グリッド間の余白）

gapプロパティは、グリッドアイテム同士の間隔（行間・列間の余白）をまとめて指定できるプロパティです。以前はgrid-row-gapとgrid-column-gapを個別に指定する必要がありましたが、現在はgapひとつで縦横の余白を一括管理できます。marginで余白を調整する場合と異なり、グリッドの内側の間隔だけをコントロールできるため、要素の外側の余白計算に悩まされにくいのも利点です。

grid-template-areas（エリア名でレイアウト管理）

grid-template-areasは、グリッドの各マスに名前を付けてレイアウトを視覚的に管理できるプロパティです。たとえば以下のように記述すると、ヘッダー・サイドバー・メイン・フッターという構造をひと目で把握できます。

.container {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

grid-rowやgrid-columnで座標を数値指定する方法に比べて直感的に配置を把握できるため、複数人での開発やコードレビューの際にも構造が伝わりやすくなるという利点があります。

justify-items / align-items / place-items（配置の制御）

グリッドアイテムをマス目の中でどう配置するかは、justify-items（横方向）とalign-items（縦方向）で制御します。両方をまとめて指定したい場合は、place-itemsプロパティを使うと1行で記述できます。「マス目は用意したが、中の要素が左上に寄ってしまう」といった悩みは、多くの場合このプロパティで解決できます。

実践コード例で学ぶグリッドレイアウトの組み方

基本プロパティを踏まえて、実際によく使われる2つのレイアウトパターンをコード例とともに紹介します。コピーしてそのまま使える形で紹介するので、手元の環境でも試してみてください。

カード一覧をレスポンシブに並べる（repeat + minmax）

ECサイトの商品一覧やブログの記事一覧のような「カードを並べるレイアウト」は、グリッドレイアウトが最も得意とするパターンのひとつです。repeat()とminmax()、auto-fitを組み合わせることで、メディアクエリを書かずに画面幅へ自動対応させることができます。

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

このコードは「1枚のカードの最小幅を240pxとしつつ、画面に収まる分だけカラム数を自動で増減させる」という指定です。画面幅が広いPCでは1行に4〜5枚、スマートフォンでは1行に1〜2枚といった具合に、カラム数の指定を書き足さなくても自然に折り返してくれます。auto-fitの代わりにauto-fillを使うと、コンテンツが少ない場合に空のトラック（余白用のマス目）を残すかどうかの挙動が変わるため、デザインの意図に応じて使い分けるとよいでしょう。

ページ全体のレイアウトをgrid-template-areasで組む

続いて、ヘッダー・サイドバー・メインコンテンツ・フッターという、Webページ全体の骨組みを組む例です。前章で紹介したgrid-template-areasを使うと、HTML構造とレイアウト構造を分離しながら、見通しの良いCSSを書くことができます。

Header
Sidebar
Main Content
Footer

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
  gap: 16px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

このように、ページの大枠はグリッドレイアウトで組み、各エリア内部の要素配置（ボタンの横並びなど）はFlexboxで整える、という役割分担にすると、シンプルで崩れにくいCSS設計になります。

レスポンシブデザインに強いグリッド設計のコツ

情報量が多いWebサイトほど、レスポンシブ対応の設計に手間がかかりがちです。ここでは、グリッドレイアウトを使ってメディアクエリの記述量を抑えつつ、崩れにくいレスポンシブデザインを実現するコツを紹介します。

メディアクエリを減らすauto-fit活用法

前章で紹介したrepeat(auto-fit, minmax())の組み合わせは、レスポンシブ対応の代表的なテクニックです。「何カラムにするか」をブレイクポイントごとに指定するのではなく、「1枚の要素の最小幅」を指定するという発想の転換によって、画面幅の変化に自動で追従するレイアウトを作れます。デザインカンプに複数の画面幅サイズが用意されている場合でも、まずはこの手法で基本形を作り、必要な箇所だけメディアクエリで微調整する、という進め方が効率的です。

ブレイクポイントごとのgrid-template-areas切り替え

一方で、ページ全体のレイアウトのようにカラム数だけでなく配置そのものを大きく変えたい場合は、ブレイクポイントごとにgrid-template-areasを切り替える方法が有効です。たとえばPC表示ではサイドバーとメインを横並びにし、スマートフォン表示ではサイドバーをメインの下に回す、といった構造の変化も、grid-template-areasの文字列を書き換えるだけで実現できます。

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 240px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

HTMLの記述順を変えずにレイアウトの見た目だけを大きく組み替えられるのは、グリッドレイアウトならではの強みです。フロート主体のレイアウトでは実現が難しかった柔軟性が、比較的シンプルなコードで得られます。

デザインシステムにグリッドを取り入れる方法

複数ページ・複数コンポーネントにまたがる制作物では、グリッドを「デザインシステム」の土台として設計しておくと、デザインの崩れを防ぎながら、オリジナリティや視覚的な美しさを両立させやすくなります。

8pxグリッド・カラム設計の考え方

デザインシステムの現場でよく採用されるのが、余白やコンポーネントのサイズを8pxの倍数で統一する「8pxグリッド」の考え方です。CSS Grid Layoutのgapやトラックサイズをこの単位に揃えておくと、Figmaなどのデザインツールで作られたカンプの数値とCSSの実装値が一致しやすくなり、デザイナーとコーダーの間での認識ズレを減らせます。あわせて、12カラムなど一定のカラム数を基準にコンポーネントの幅を設計しておくと、ページが増えてもレイアウトの一貫性を保ちやすくなります。

Figma等のデザインツールとの連携

近年のデザインツールにはグリッド機能やオートレイアウト機能が搭載されており、CSS Grid Layoutと近い考え方でカンプを作成できます。デザインカンプの段階でカラム数・ガター幅（要素間の余白）・ブレイクポイントをあらかじめ決めておき、それをそのままCSSのgrid-template-columnsやgapに落とし込む、という制作フローを整えておくと、デザインとコーディングの橋渡しがスムーズになります。こうした一連の設計・実装の考え方は、Webデザインとコーディングの両方を体系的に学べるWebデザイナー専攻やUI/UXデザイン専攻のカリキュラムでも扱われている内容です。

グリッドレイアウトでよくある失敗と対処法

最後に、グリッドレイアウトを学び始めた方がつまずきやすいポイントと、その対処法を紹介します。

説明会無料・全国36校舎で開催・オンライン参加可

よくある質問