CSS Gridのレイアウトが崩れる・列が揃わないときの原因と対処

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のままファイルを差し替えられるので、修正のたびにリンクを送り直す必要がありません。社外に見せる場合はパスワードや会社ドメイン認証を併用すると安心です。