CSSグリッドとは？基本の使い方・レイアウト例・レスポンシブ対応を解説

CSSグリッド（CSS Grid）は、Webページの要素を行と列に沿って配置できるCSSのレイアウト機能です。親要素に display: grid; を指定し、列幅や行の高さ、要素間の余白を設定することで、カードの一覧表示から複雑なページ構成まで柔軟に作成できます。

Webサイトを制作するとき、「複数の画像を均等に並べたい」「サイドバーと本文を横並びにしたい」「スマートフォンでは1列に切り替えたい」といった場面があります。CSSグリッドを使えば、こうしたレイアウトをCSSで管理でき、画面幅に合わせた調整もしやすくなります。

ただし、fr や grid-template-columns などの指定方法を理解していないと、列幅が想定どおりにならなかったり、要素が画面からはみ出したりすることがあります。まずは基本の仕組みを理解し、簡単なレイアウトから試していくとスムーズです。

この記事では、CSSグリッドの基本構造と使い方、Flexboxとの違い、実践的なレイアウト例、レスポンシブ対応の方法を解説します。コードを手書きせずにレイアウトを作成したい場合に役立つ、CSSグリッドジェネレーターの使い方も紹介します。

【この記事でわかること】

• CSSグリッドの仕組みとFlexboxとの使い分け
• 基本プロパティの意味とHTML・CSSの書き方
• カード、サイドバー、不規則なグリッドの作成方法
• レスポンシブ対応とよくある表示トラブルの解決方法
• CSSグリッドジェネレーターを使ったコード作成方法

CSSグリッドとは？基本の仕組みとFlexboxとの違い

CSSグリッドとは、Webページ上の要素を格子状に配置するためのレイアウトシステムです。横方向の列（column）と縦方向の行（row）を組み合わせてレイアウトを定義できるため、複数の要素を規則的に並べたいときや、ページ全体の構成を設計するときに利用されます。

たとえば、商品画像を3列に並べる場合、親要素に3つの列を設定すれば、その中にある商品カードを自動的に配置できます。さらに、特定のカードを2列分の幅で表示したり、サイドバーだけ幅を固定したりすることも可能です。

CSSグリッドを構成する基本要素

CSSグリッドでは、レイアウトの土台となる親要素を「グリッドコンテナー」、その中に配置される子要素を「グリッドアイテム」と呼びます。

たとえば、3列×2行のグリッドでは、基本的に6つのセルができます。列幅を均等にしたい場合は同じ比率を指定し、左側を狭く、右側を広くしたい場合は列ごとに異なる値を設定します。グリッドラインを使えば、1つの要素が複数のセルをまたぐように配置することもできます。

CSS GridとFlexboxの違い

CSS GridとFlexboxは、どちらもWebページの要素を配置するためのCSSレイアウト機能です。どちらを選ぶかは、並べる要素の数だけでなく、どのように配置を管理したいかによって判断できます。

たとえば、ヘッダー内のロゴとメニューを横並びにするなら、Flexboxが扱いやすいでしょう。一方、商品カードを3列に配置し、行間もそろえたい場合はCSS Gridが適しています。

2つを組み合わせる方法もあります。ページ全体の構造をGridで管理し、カード内部のボタンやテキストの配置にFlexboxを使えば、それぞれの特徴を活かしたレイアウトを構築できます。

CSSグリッドのメリット・デメリット

CSSグリッドのメリットは、列幅や行の間隔、要素が占める範囲をまとめて管理できることです。特に同じ形式のカードを多数並べる場合、HTMLの要素を追加しても、指定したグリッドに沿って配置されるため、ページを更新しやすくなります。

一方で、複雑なグリッドラインやエリア指定を多用すると、どの要素がどこに配置されるのか把握しにくくなることがあります。また、固定幅の列を設定しただけでは、スマートフォンに適した表示になるとは限りません。はじめは均等な2〜3列のレイアウトから練習し、必要に応じて配置指定やレスポンシブ対応を追加するとよいでしょう。

CSSグリッドの基本的な使い方と主なプロパティ

CSSグリッドを使うには、HTMLで親要素と子要素を用意し、親要素に display: grid; を指定します。まずは3つのカードを横並びにするシンプルな例で、基本の書き方を確認しましょう。

display: gridで3列のレイアウトを作る

HTMLでは、次のように親要素の中に3つのカードを配置します。

<div class="cards">
  <div class="card">カードA</div>
  <div class="card">カードB</div>
  <div class="card">カードC</div>
</div>

続いて、CSSで列数と余白を指定します。

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

.card {
  padding: 24px;
  background: #f3f4f6;
  border-radius: 8px;
}

このコードでは、display: grid; によって .cards がグリッドコンテナーになります。grid-template-columnsは列の構成を指定するプロパティで、repeat(3, minmax(0, 1fr)) は利用できる幅を3つの列に均等配分する設定です。gap: 16px; を指定すると、カードとカードの間に16pxの余白ができます。

minmax(0, 1fr) は、列の最小サイズを0、最大サイズを利用可能な幅の1単位分として設定しています。長いテキストなどが原因で列が必要以上に広がるのを防ぐ際にも役立ちます。ただし、カード内部の画像や文字列が必ず収まるわけではないため、必要に応じて画像サイズや文字の折り返しも調整してください。

なお、この例は3列を維持する指定です。画面が狭い場合の列数変更については、後のレスポンシブ対応で解説します。

HTMLとCSSの役割がまだ曖昧な場合は、HTMLでホームページを作る手順も確認しておくと、どこにGridの設定を追加すればよいか理解しやすくなります。

grid-template-columns・fr・gapの使い方

CSSグリッドでは、列幅や行の高さを指定する方法を理解すると、作成できるレイアウトの幅が広がります。

たとえば、次のコードは左列を200px、右列を残りの幅に設定する例です。

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

fr はグリッド内の利用可能な空間を配分するための単位です。1fr 2fr と指定した場合、ほかのサイズや余白などを考慮した残りの空間を、基本的に1対2の比率で配分します。

また、行の高さを個別に指定する場合には grid-template-rows を使います。

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px auto;
  gap: 20px;
}

この設定では、列を1対2の比率で配置し、1行目を100px、2行目を内容に応じた高さにします。縦方向のサイズを固定する必要がない場合は、grid-template-rows を省略して、内容に応じて行を生成する方法もあります。

よく使うプロパティは以下のとおりです。

grid-columnとgrid-rowで要素の位置を指定する

グリッド内の要素を特定の場所に配置したいときは、grid-column と grid-row を使います。

.featured {
  grid-column: 1 / 3;
  grid-row: 1 / span 2;
}

grid-column: 1 / 3; は、1番目の縦方向のグリッドラインから3番目のラインまでの範囲を使う指定です。結果として、要素は2列分の幅を占めます。

grid-row: 1 / span 2; は、1行目から始めて2行分の高さを使う指定です。グリッドラインはセルの境界を表すため、3番目のラインまで指定しても3列分にはならない点に注意してください。

この方法を使えば、ほかのカードより大きく表示するメイン画像や、複数の行にまたがるコンテンツを作成できます。

CSSグリッドのレイアウト実例｜よく使う4つのパターン

CSSグリッドは、ブログ、商品一覧、ポートフォリオ、企業サイトなど、さまざまなWebページの構成に活用できます。ここでは、一般的な制作場面を想定した4つのレイアウト例を紹介します。

1.ブログや企業サイトの2カラムレイアウト

本文とサイドバーを横並びにする2カラムレイアウトは、CSSグリッドの基本的な活用例です。

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

この例では、本文側が残りの幅を使い、右側のサイドバーは240pxに固定されます。ブログの記事ページなら、広い列に本文、狭い列に目次や関連記事を配置する構成に利用できます。

サイドバーの内容が少ない場合は、この設定だけでもシンプルなレイアウトになります。ただし、画面幅が狭いと本文を表示するスペースが不足するため、後述するメディアクエリと組み合わせて1列に切り替える設計が必要です。

2.商品一覧やポートフォリオのカードレイアウト

商品画像や制作実績を並べる場合は、カードを均等な幅で配置すると一覧性が高まります。たとえば、写真を含むカードを3列にしたい場合は、次のように設定できます。

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.gallery img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

object-fit: cover; は、画像の縦横比を維持しながら指定領域を埋める設定です。画像のサイズがそれぞれ異なっていても、表示領域の大きさをそろえられます。ただし、画像の一部が切り取られるため、人物の顔や商品の重要な部分が見切れないか確認する必要があります。

写真作品を一覧表示するポートフォリオでは、カードごとに画像サイズを統一する方法のほか、作品の特徴に合わせて大きさを変える方法もあります。こうした作品一覧を含めてポートフォリオサイトを作る場合は、掲載する作品やプロフィールなど、ページ全体の構成も先に整理しておくとよいでしょう。

3.大小のカードを組み合わせた不規則なグリッド

ニュースサイトの特集欄や作品ギャラリーでは、重要なコンテンツをほかの要素より大きく表示することがあります。CSSグリッドなら、特定のカードだけ2列分、あるいは2行分の領域を使うように指定できます。

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 12px;
}

.tile--wide {
  grid-column: span 2;
}

.tile--tall {
  grid-row: span 2;
}

この例では、通常のカードは1つのセルを使い、.tile--wide は2列分、.tile--tall は2行分の領域を占めます。要素の並び順や占める範囲によって空白ができることがあるため、実際のカード数でプレビューしながら配置を調整します。

私がWeb制作で複数の領域を持つレイアウトを考えるときも、コードを書く前に、どの要素をどれだけの幅で見せたいか整理することを大切にしています。特に大きなカードを配置する場合は、最初に列数と要素の優先順位を決めておくと、画面幅に応じた調整を考えやすくなります。

4.grid-template-areasを使ったページ全体の構成

ヘッダー、メインコンテンツ、サイドバー、フッターなどの領域が決まっている場合は、grid-template-areas を使うと配置を名前で管理できます。

<div class="page-grid">
  <header class="site-header">ヘッダー</header>
  <main class="main-content">本文</main>
  <aside class="sidebar">サイドバー</aside>
  <footer class="site-footer">フッター</footer>
</div>

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
  gap: 16px;
}

.site-header {
  grid-area: header;
}

.main-content {
  grid-area: content;
}

.sidebar {
  grid-area: sidebar;
}

.site-footer {
  grid-area: footer;
}

このコードでは、ヘッダーとフッターが横幅全体を使い、中央部分を本文とサイドバーに分けています。CSS内に header や content といった名前が並ぶため、レイアウトの構造を把握しやすいのが特徴です。

名前付きエリアを使う場合は、grid-template-areas で指定した名前と、各要素の grid-area の値を一致させてください。また、指定する各行のセル数をそろえ、名前付き領域が長方形になるように定義する必要があります。

CSSグリッドをレスポンシブ対応させる方法

CSSグリッドは、画面幅に応じて列の数やサイズを変更できるため、レスポンシブデザインにも活用できます。ただし、display: grid; を指定するだけで、自動的に最適なスマートフォン表示が完成するわけではありません。

たとえば、3列のレイアウトを固定したままスマートフォンで表示すると、カードが細くなってテキストが読みにくくなる場合があります。列数を自動調整する方法と、画面幅を条件に切り替える方法を理解しておきましょう。

auto-fitとminmaxで列数を自動調整する

カードの数が変わる一覧ページでは、auto-fit と minmax() を組み合わせると、コンテナーの幅に応じて列数を調整できます。

.responsive-cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}

この例では、基本的にカードの最小幅を220pxとして、コンテナーに収まる数の列を作ります。利用可能な幅が広い場合は複数列になり、狭くなると列数が減ります。min(100%, 220px) を使うことで、コンテナー自体が220pxより狭い場合にも列がその幅に収まるよう配慮しています。

特定の画面幅ごとに列数を指定する必要がなく、商品カードや記事一覧など、同じ形式の要素を繰り返し並べる場面に向いています。

メディアクエリで1列に切り替える

サイドバー付きのレイアウトや、特定のカードを大きく表示するグリッドでは、メディアクエリで明示的に配置を変更すると管理しやすくなります。

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

@media (max-width: 768px) {
  .content-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

画面幅が768px以下になると、2列から1列に切り替わります。768pxはあくまで設定例なので、実際には本文やサイドバーが窮屈になり始める幅を確認し、切り替える位置を調整してください。

先ほどの名前付きエリアのレイアウトも、次のように変更できます。

@media (max-width: 768px) {
  .page-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "footer";
  }
}

これで、スマートフォンではヘッダー、本文、サイドバー、フッターの順に縦並びになります。

なお、CSSで要素の表示位置を変えても、HTML内の要素順序やスクリーンリーダーの読み上げ順序が自動的に変わるわけではありません。情報を読む順番が自然になるよう、HTMLの構造も確認しておきましょう。

レスポンシブ対応で確認したい3つのポイント

列数だけでなく、中身の表示も確認することが大切です。 カード幅が変わると、見出しの折り返し、画像の縦横比、ボタンの配置も変化します。

公開前には、次の点を確認しましょう。

1. 文字の読みやすさ： 長いタイトルやURLが列幅を押し広げていないか。
2. 画像の表示： 固定サイズの画像がコンテナーからはみ出していないか。
3. 要素の順番： モバイル表示で本文や操作ボタンが適切な順序になっているか。

ブラウザの開発者ツールで画面幅を連続的に変えながら確認すると、特定の端末サイズだけでは気づきにくいレイアウト崩れも見つけやすくなります。

CSSグリッドがうまく表示されないときの対処法

CSSグリッドで想定どおりのレイアウトにならない場合は、まず親要素への指定、列幅、子要素の配置範囲を確認しましょう。コード自体にエラーがなくても、要素の内容やコンテナーの幅によって表示が変わることがあります。

特に、等幅の列を指定しているのに一部の列だけ広がる場合は、子要素の中身を確認してください。長いURLや改行できない文字列、固定幅の画像などが原因になることがあります。

.grid-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.grid-item img {
  display: block;
  max-width: 100%;
  height: auto;
}

この設定は、長い文字列を折り返しやすくし、画像が親要素の幅を超えないようにする例です。ただし、すべての要素に一律で適用すればよいわけではありません。画像を切り取りたくない場合や、特定の文字列を折り返したくない場合は、コンテンツの目的に合わせて調整します。

レイアウトが崩れたときは、最初からCSS全体を書き直すよりも、ブラウザの開発者ツールでグリッドコンテナーを選択し、列幅やグリッドラインを確認する方が原因を見つけやすくなります。まずは必要最小限のHTMLとCSSで再現し、必要に応じてCSSを<style>要素に記述したHTMLをReaddyのHTMLビューアでプレビューしながら、問題のある指定を一つずつ調べてみてください。

CSSグリッドを効率よく作成する方法

CSSグリッドの基本を理解したら、列数や余白を何度も変更する作業を効率化する方法も考えてみましょう。簡単な2列レイアウトなら手書きでも十分ですが、複数の列幅を試したり、名前付きエリアを組み合わせたりする場合は、視覚的に調整できるツールが役立ちます。

CSSグリッドジェネレーターでレイアウトを作成する

CSSグリッドジェネレーターは、列数や行数、余白などを指定して、対応するCSSコードを生成するツールです。数値を変更しながら配置を確認できるため、CSSの記述に慣れていない場合や、複数のレイアウト案を比較したい場合に向いています。

ReaddyのCSSグリッド作成ツールでは、列数・行数・列幅・行の高さ・ギャップを入力し、グリッドプレビューを確認しながらCSSコードを作成できます。セルを選択して名前付きグリッドエリアを定義する機能もあり、生成したコードはコピーして利用できます

基本的な操作手順：

1. 列数と行数を決める： 作成したいレイアウトに合わせて、グリッドの構成を設定します。たとえば3列×3行なら、9つのセルが表示されます。
2. 列幅・行の高さ・ギャップを入力する： 1fr や 200px などを使い、各列・行のサイズと余白を調整します。
3. プレビューで配置を確認する： 表示されたグリッドを見ながら数値を変更します。必要に応じてセルを選択し、配置エリアを指定します。
4. 生成されたCSSをコピーする： 「コードをコピー」からCSSを取得し、自分のWebページのスタイルシートへ追加します。

たとえば、列数3、行数3、列幅と行の高さをそれぞれ 1fr、ギャップを 10px とした場合、基本的な生成コードは次のようになります。

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

このCSSを使う場合は、HTML側に .parent クラスを持つ親要素と、グリッド内に配置する子要素を用意します。名前付きエリアを生成した場合は、必要に応じて各子要素にも対応する grid-area を指定してください。

ツールはグリッド構造を視覚的に検討するのに適していますが、生成されたCSSがすべての画面幅で最適に表示されるとは限りません。特に固定した列数や幅を使う場合は、実際のコンテンツを入れ、スマートフォン表示を確認してから使用することが大切です。

手書き・ジェネレーター・AIサイトビルダーの選び方

レイアウトの作成方法は、コードを自分で管理したいか、短時間で配置を試したいか、Webサイト全体を制作したいかによって選びます。

たとえば、既存のWebページに3列のカード一覧を追加するなら、CSSを手書きするか、ジェネレーターで基本コードを作る方法が適しています。

一方、ポートフォリオサイトや企業サイト全体をこれから制作する場合は、希望するレイアウトを文章で伝えてサイトを作成する方法もあります。Readdy AIサイトビルダーでは、テキスト入力からページ構成やデザインを生成し、画面上で編集できます。

「作品を3列のカードで表示し、スマートフォンでは1列にしたい」といった希望を文章で伝えて、ページの構成案を作ることができます。ただし、希望したレイアウトがそのまま完成するかは生成結果によるため、編集画面で表示を確認しながら調整してください。

CSSの仕組みを身につけたい場合は実際にコードを書いて試し、レイアウトの検討時間を短縮したい場合はジェネレーターを利用するなど、目的に応じて方法を選ぶとよいでしょう。

よくある質問

CSS GridはHTMLだけで使えますか？

いいえ、CSS GridはCSSのレイアウト機能なので、HTMLだけでは指定できません。HTMLで要素の構造を作り、CSSで親要素に display: grid; などの設定を追加します。HTMLファイル内の <style> 要素にCSSを書くこともできます。

display: gridとdisplay: inline-gridの違いは何ですか？

display: grid はブロックレベルのグリッドコンテナーを作り、display: inline-grid はインラインレベルのグリッドコンテナーを作ります。内部のグリッド配置機能は共通していますが、コンテナー自体が周囲の要素とどのように並ぶかが異なります。

grid-template-columnsを指定しないとどうなりますか？

通常、display: grid; のみを指定すると、子要素は自動配置され、明示的に列数を決めない場合は基本的に1列に並びます。grid-template-columns を追加することで、複数列の幅や構成を指定できます。ただし、ほかのグリッド関連プロパティによって結果が変わる場合もあります。

auto-fitとauto-fillはどう違いますか？

auto-fit は空の繰り返しトラックを折りたたみ、既存のアイテムが利用できるスペースを使いやすくする指定です。一方、auto-fill はアイテムがない場合でも、収まる数のトラックを維持します。カードの数が少ない場合にも列幅を広げたいなら、auto-fit を検討するとよいでしょう。

CSSグリッドで要素を中央揃えにするには？

グリッドアイテムをセル内で縦横中央に配置したい場合は、親要素に place-items: center; を指定できます。特定のアイテムだけ調整するなら、align-self と justify-self を使用します。中央揃えにしたい領域の高さや幅が十分にあるかも確認してください。

CSSグリッドはSEOに影響しますか？

CSS Gridを使用すること自体が、直接的なSEOの不利になるわけではありません。ただし、表示順序とHTMLの読み取り順序が異なる場合や、画像・コンテンツのサイズ設定が不適切でレイアウトが大きくずれる場合は、利用体験に影響します。見た目だけでなく、HTMLの論理的な順序や表示の安定性も確認しましょう。

CSSグリッドは無料で使えますか？

はい。CSS Gridはブラウザが対応する標準的なCSS機能なので、利用自体に料金はかかりません。専用ソフトを購入しなくても、テキストエディターとブラウザがあれば基本的なレイアウトを作成できます。可視化ツールを使う場合は、各サービスの利用条件を確認してください。

まとめ

CSSグリッドは、行と列を組み合わせてWebページのレイアウトを柔軟に設計できるCSSの機能です。基本的なプロパティを理解すれば、カード一覧やサイドバー付きのページから、レスポンシブ対応のレイアウトまで幅広く活用できます。

目的に応じて、次の方法を選ぶとよいでしょう。

• CSSグリッドの基本を身につけたい人： display: grid; や grid-template-columns を使い、まずは2列・3列のシンプルなレイアウトから練習しましょう。
• レイアウトを効率よく作成したい人： Readdy CSSグリッド作成ツールを使えば、列数や間隔を調整しながらプレビューを確認し、必要なCSSコードを生成できます。
• Webサイト全体を作成したい人： Readdy AIサイトビルダーなら、希望するデザインやページ構成を文章で伝え、生成されたサイトを編集しながら制作を進められます。

まずはReaddy CSSグリッド作成ツールで列数や余白を調整し、自分のWebページに合ったレイアウトを作成してみましょう。