---
title: "FirefoxでCSS Gridが崩れるときの原因と直し方"
description: "FirefoxでCSS Gridレイアウトが崩れる問題に直面したWeb担当者・フロントエンドエンジニア向け。ChromeとFirefoxの挙動差から生まれる崩れの特定方法、CSSの修正手順、再発防止の設計指針をまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/firefox-grid-broken-fix"
markdown: "https://giga-site.com/articles/firefox-grid-broken-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# FirefoxでCSS Gridが崩れるときの原因と直し方

CSS Gridを使ったHTMLをFirefoxで開くとレイアウトが崩れる問題は、ChromeやEdgeで正常に見えるからこそ気づきにくいです。Firefoxのレンダリングエンジン差による原因を理解し、具体的な修正コードで解決する方法を解説します。

> Source HTML: https://giga-site.com/articles/firefox-grid-broken-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

Firefox独自のGrid実装では`grid-template-columns: repeat(auto-fill, minmax(0, 1fr))`の`minmax(0, 1fr)`がChromeと異なる計算を行う場合があります。特にGrid子要素に`width: 100%`や`overflow: hidden`が同時に指定されていると、FirefoxがGrid列幅の再計算に失敗し、意図した列数にならないことがあります。CSSを`minmax(200px, 1fr)`のように明示的な最小値を指定すると解消されることが多いです。

もう一つの原因はGrid子要素への`margin`指定です。FirefoxはGridアイテムのmarginをChromeより厳密に計算するため、`margin: auto`や`margin: 0 auto`をGrid内のアイテムに使うとChromeでは中央揃えになるのにFirefoxで左端に寄ることがあります。代わりに`justify-self: center`または`align-self: center`をGridアイテムに指定すると両ブラウザで同じ結果になります。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

FirefoxのF12でGrid Inspectorを開きます（Layoutタブ→Grid）。ここで各GridエリアとGridラインが視覚的に表示され、意図した列・行の構成になっているかをChrome版と比較できます。Chromeでは3カラムなのにFirefoxで1カラムになっている場合は、Grid列の計算方法の差が原因です。`grid-template-columns`の値を確認し、`fr`単位の解釈に問題がないかをチェックします。

また`grid-gap`（旧プロパティ）ではなく`gap`を使っているかを確認します。`grid-gap`はFirefoxの古いバージョンでサポートが限定的でしたが、現在のFirefox最新版では両方動きます。それでも`gap`で統一することで将来的な互換性が高まります。さらに、Grid内で`float`を使っている場合はFirefoxで無視される挙動が出るため、`float`は削除します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手のFirefoxバージョンを確認します。Firefox ESR（延長サポート版）は企業環境でよく使われており、最新版と1〜2バージョン差があることがあります。ESR版で特定のGridプロパティが未実装のケースはほぼなくなりましたが、念のため「Firefox→設定→Firefox について」のバージョン番号を教えてもらいます。バージョン78以降であれば主要なGridプロパティは全てサポートされています。

相手がFirefoxのズーム設定を変更している可能性もあります。ズーム150%など拡大率を上げると、Grid列幅の計算でピクセル単位の小数点処理がブラウザによって異なり、想定外の折り返しが起きることがあります。「Ctrl+0でズームをリセットした状態で確認してください」と依頼し、崩れが解消されれば固定px幅から`fr`ベースの相対幅へ変更するか`minmax`の最小値を調整します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

AIでCSS GridのHTMLを生成する際は「ChromeとFirefox両方で正しく表示されること。`grid-template-columns`にはminmax(最小px値, 1fr)形式を使うこと。Gridアイテムのセンタリングはmarginではなくjustify-selfとalign-selfで行うこと」とプロンプトに追記します。これだけで大半のFirefox互換問題を避けられます。

生成後にローカルのFirefoxで必ず一度表示確認するチェックを標準化します。ギガサイト便にアップロードする前のフローとして「①Chrome確認→②Firefox確認→③問題なければアップロード」を固定化しておくと、相手への差し替え依頼回数が減ります。Firefox開発者ツールのGrid Inspectorは非常に強力なため、一度使い方を覚えると格段に原因特定が速くなります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### `grid-template-columns: repeat(3, 1fr)`でChromeは3列、Firefoxは1列になります。なぜですか？

Gridコンテナに明示的な`width`が設定されておらず、かつ親要素がflexコンテナの場合、FirefoxはGridコンテナ幅を0として計算してしまうことがあります。Gridコンテナかそのラッパーにexplicitlyな`width: 100%`または`min-width: 0`を追加すると解消することが多いです。

### Firefox Grid Inspectorはどこから開きますか？

F12で開発者ツールを開き、上部タブの「インスペクター」を選択します。右側のパネルから「レイアウト」タブをクリックすると「グリッド」セクションが表示され、ページ上のGridコンテナにオーバーレイが表示されます。

### AIが生成したCSSはFirefox互換をチェックしてくれますか？

AIはFirefox互換の指示をしないと確認しません。プロンプトに「MDN Can I Useで確認しFirefox最新版で動作すること」と書いても完璧ではないため、生成後に必ずFirefoxでの目視確認を行うことを推奨します。

## 関連記事

- [FirefoxでCSS Gridが崩れるときに共有前に確認するチェックリスト](https://giga-site.com/articles/firefox-grid-broken-checklist/index.md)
- [FirefoxでCSS Gridが崩れる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/firefox-grid-broken-ai-prompt/index.md)
- [FirefoxでCSS Gridが崩れるときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/firefox-grid-broken-request-message/index.md)
- [OGP画像が更新されないときの原因と直し方](https://giga-site.com/articles/ogp-image-not-updating-fix/index.md)
- [ファビコンが更新されないときの原因と直し方](https://giga-site.com/articles/favicon-cache-fix/index.md)
- [QRコードで開くと404になるときの原因と直し方](https://giga-site.com/articles/qr-404-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "FirefoxでCSS Gridが崩れるときの原因と直し方",
  "description": "FirefoxでCSS Gridレイアウトが崩れる問題に直面したWeb担当者・フロントエンドエンジニア向け。ChromeとFirefoxの挙動差から生まれる崩れの特定方法、CSSの修正手順、再発防止の設計指針をまとめます。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/firefox-grid-broken-fix",
  "url": "https://giga-site.com/articles/firefox-grid-broken-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "`grid-template-columns: repeat(3, 1fr)`でChromeは3列、Firefoxは1列になります。なぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Gridコンテナに明示的な`width`が設定されておらず、かつ親要素がflexコンテナの場合、FirefoxはGridコンテナ幅を0として計算してしまうことがあります。Gridコンテナかそのラッパーにexplicitlyな`width: 100%`または`min-width: 0`を追加すると解消することが多いです。"
      }
    },
    {
      "@type": "Question",
      "name": "Firefox Grid Inspectorはどこから開きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "F12で開発者ツールを開き、上部タブの「インスペクター」を選択します。右側のパネルから「レイアウト」タブをクリックすると「グリッド」セクションが表示され、ページ上のGridコンテナにオーバーレイが表示されます。"
      }
    },
    {
      "@type": "Question",
      "name": "AIが生成したCSSはFirefox互換をチェックしてくれますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AIはFirefox互換の指示をしないと確認しません。プロンプトに「MDN Can I Useで確認しFirefox最新版で動作すること」と書いても完璧ではないため、生成後に必ずFirefoxでの目視確認を行うことを推奨します。"
      }
    }
  ]
}
```