Gridレイアウトで謎の横スクロールが出る原因

こんにちは。かずです。
CSSのGridやFlexboxを使っていて、

・なぜか画面幅を超える
・横スクロールが出る
・1frを使っているのに崩れる
・スマホだけ横にズレる

こんな経験ありませんか？
僕はめっちゃあります。嫌いです。憎らしい。小一時間問い詰めたい。

結論から言うと、「min-width: 0;」が原因のことがかなり多いです。

今回は、まれによくある（？）「GridやFlexレイアウトで謎の横スクロールが出る問題」についてです。

よくあるコード

例えばこんなGridレイアウト。

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

一見問題なさそうですが、子要素の中に長いテキストなどが入るとレイアウトが崩れることがあります。

こんな感じで
・要素が縮まない
・コンテンツがはみ出す

という状態になります。

なぜかというと、Gridの子要素は、デフォルトで「min-width:auto」のような挙動になります。
そのため、「中身がこれ以上縮めない」と判断されると、Grid全体が押し広げられてしまうんです。
特に以下のような要素で発生しやすいです。

・長い英数字
・URL
・ボタン
・input
・codeタグ

解決方法

子要素に「min-width:0;」を指定します。

.item{
	min-width:0;
}

これだけ。
これでGridの子要素が適切に縮めるようになり、横スクロールが解消されます。

特に多いのが、

・カードUI
・投稿一覧
・お知らせ一覧
・横並びボタン
・SP時だけ崩れるケース

など。

また、「grid-template-columns:repeat(3,1fr);」を使っていると、「1frなんだから自動で収まるでしょ」と思いがちですが、中身の最小サイズに引っ張られるため、普通にはみ出します。

よくあるのが、「overflow:hidden;」や「text-overflow:ellipsis;」を指定しても直らないケース。
これは、そもそもGridの子要素自体が縮めていないためです。
先に「min-width:0;」を指定する必要があります。

まとめ

Grid レイアウトで謎の横スクロールが出たら、まず「min-width:0;」を疑うのがおすすめです。
特に、「grid-template-columns:repeat(◯,1fr);」を使っている場合はかなり遭遇率が高いです。

余談として、それでもなおらない！！というときは中身のテキストに注目してみると、謎の大量の余白があったりすることもあります。
これはテキストをコピペしながらコーディングしていくとよくあります。ほんとうにまれによくあります。憎らしい。

それでは！