---
title: "CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処"
description: "CSS Gridで列が揃わない・要素が想定外に流れてしまうコーダー向け。grid-template-columnsの指定不足やfr単位の誤解、アイテム側のmin-widthが原因かどうかを素早く特定できる記事です。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/grid-layout-collapses"
markdown: "https://giga-site.com/articles/grid-layout-collapses/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処

Gridを使ったのに列の幅が揃わない、要素が想定外の位置に流れる、子要素がはみ出す。多くはgrid-template-columnsの指定不足、fr単位の誤解、そしてアイテム側のmin-widthによるものです。この記事では崩れの典型を切り分けながら直す方法をまとめます。

> Source HTML: https://giga-site.com/articles/grid-layout-collapses
> Article index: https://giga-site.com/articles/index.md

## Gridの列はテンプレートで決まる

display:gridを付けただけでは列は1列のまま縦に積まれます。横並びの列を作るにはgrid-template-columnsで列の構成を明示する必要があります。これを忘れると、Flexのように自動で横並びにはなりません。

例えば3列にしたいならgrid-template-columns:1fr 1fr 1frのように記述します。繰り返しはrepeat(3, 1fr)と書くと簡潔です。指定した列数を超えるアイテムは自動的に次の行へ折り返されます。

列が揃わないと感じたときは、まずgrid-template-columnsが意図どおりの値になっているか、開発者ツールのGridオーバーレイで実際の線を確認するのが近道です。

## fr単位の誤解でよくある崩れ

frは余った空間を分配する単位で、コンテンツの最小サイズを下回ってまで縮むわけではありません。1fr 1frと書いても、片方に長いコンテンツがあると、その最小幅が優先されて左右の幅が揃わないことがあります。

幅を厳密に揃えたいときは、minmax(0, 1fr)を使うのが定番です。これでアイテムのコンテンツ由来の最小幅を0まで許容し、純粋に空間を等分できます。テーブル状のレイアウトで特に効果的です。

frとpx、percentを混在させると分配の計算が直感に反する場合があります。固定したい列はpx、可変にしたい列だけfrにすると意図が読み取りやすくなります。

## 症状別チェック表

CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 崩れを切り分ける手順

Gridの崩れは確認の順序を決めておくと早く特定できます。次の手順で進めてください。

1. 親にdisplay:gridが付き、grid-template-columnsが指定されているか確認する
2. 開発者ツールのGridオーバーレイで実際の列線とトラック幅を表示する
3. 揃わない列にminmax(0, 1fr)を試して挙動が変わるか見る
4. はみ出すアイテムにmin-width:0/overflow:hiddenを当てて原因を絞る
5. gridのgapやpaddingが想定外に効いていないか確認する

## アイテムのはみ出しとmin-width

GridアイテムにもFlexと同様にmin-width:autoが効いており、長いテキストや横幅の大きい画像が原因でトラックを押し広げ、レイアウトを崩します。これに気づかないと、frを調整しても直りません。

対策はアイテムにmin-width:0を与えることです。テキストのはみ出しが伴う場合はoverflow:hiddenやtext-overflow:ellipsis、長い英数字にはoverflow-wrap:anywhereを併用すると安定します。

画像はwidth:100%とdisplay:blockを付けると、トラック幅に対して素直に追従するようになります。

## 確認用レイアウトを共有して見比べる

Gridの崩れは値を少し変えるだけで結果が大きく変わるため、複数の修正案を実機で比較するのが効果的です。minmaxあり版・なし版、列数違いなどを並べると違いが一目で分かります。

作った検証用HTMLを関係者と共有したいときは、ギガサイト便にHTMLやZIPをドロップするだけで共有URLが発行できます。会員登録なしでも公開でき、URLのままファイルを差し替えられるので、修正のたびにリンクを送り直す必要がありません。社外に見せる場合はパスワードや会社ドメイン認証を併用すると安心です。

## よくある質問

### display:gridにしたのに縦一列のままです

grid-template-columnsで列を定義していないためです。repeat(3, 1fr)のように列の構成を明示すると横並びになります。

### 1fr 1frなのに左右の幅が揃いません

アイテムのコンテンツ最小幅が効いている可能性があります。minmax(0, 1fr)に置き換えて、コンテンツによらず空間を等分できるか確認してください。

### アイテムがトラックからはみ出します

min-width:autoが原因のことが多いです。アイテムにmin-width:0を付け、必要に応じてoverflowやoverflow-wrapを併用してください。

### GridとFlexはどちらを使うべきですか

二次元(行と列の両方)の整列はGrid、一次元(横一列か縦一列)の整列はFlexが向きます。カード一覧の整然とした格子にはGridが扱いやすいです。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [Bootstrapのグリッドやコンポーネントが崩れるときの対処](https://giga-site.com/articles/bootstrap-grid-not-aligning/index.md)
- [印刷すると崩れる・はみ出すときの対処](https://giga-site.com/articles/print-layout-broken/index.md)
- [読み込み中にレイアウトがガクッとずれるときの原因と対処](https://giga-site.com/articles/layout-shift-loading-jump/index.md)
- [スマホを横向きにすると崩れるときの原因と対処](https://giga-site.com/articles/landscape-mode-layout-break/index.md)
- [ブラウザのズーム（拡大表示）でレイアウトが崩れるときの対処](https://giga-site.com/articles/browser-zoom-layout-break/index.md)
- [公開後にJavaScriptが動かないときの原因と直し方](https://giga-site.com/articles/javascript-not-working/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処",
  "description": "CSS Gridで列が揃わない・要素が想定外に流れてしまうコーダー向け。grid-template-columnsの指定不足やfr単位の誤解、アイテム側のmin-widthが原因かどうかを素早く特定できる記事です。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/grid-layout-collapses",
  "url": "https://giga-site.com/articles/grid-layout-collapses",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "display:gridにしたのに縦一列のままです",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "grid-template-columnsで列を定義していないためです。repeat(3, 1fr)のように列の構成を明示すると横並びになります。"
      }
    },
    {
      "@type": "Question",
      "name": "1fr 1frなのに左右の幅が揃いません",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "アイテムのコンテンツ最小幅が効いている可能性があります。minmax(0, 1fr)に置き換えて、コンテンツによらず空間を等分できるか確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "アイテムがトラックからはみ出します",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "min-width:autoが原因のことが多いです。アイテムにmin-width:0を付け、必要に応じてoverflowやoverflow-wrapを併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "GridとFlexはどちらを使うべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "二次元(行と列の両方)の整列はGrid、一次元(横一列か縦一列)の整列はFlexが向きます。カード一覧の整然とした格子にはGridが扱いやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```