長いURLでCSS Gridがはみ出す原因と直し方

3列のカードをCSS Gridで並べたところ、長いURLや空白のない識別子を入れたカードだけが横へ広がる。幅を100%にしても収まらず、ページ全体に横スクロールが出る。このようなときは、画面幅の条件を増やす前に、列と要素が「どこまで縮めるか」を確認します。

この記事は新機能のニュースではなく、2026年10月24日に確認した仕様・公式リファレンスに基づく実装解説です。対象は横書きのカード一覧です。実装例のブラウザー実行検証は本稿の作成環境では行えていないため、末尾の確認項目を対象ブラウザーで実施してから適用してください。

1frは無条件に親の中へ収まる指定ではない

列に単独で書く1frは、余った空間を分ける指定ですが、最小側に自動の制約を持ちます。W3C：CSS Grid Layout Level 1のトラックサイズと自動最小サイズでは、minmax()の外で指定するフレックス値がminmax(auto, …)を意味すると説明されています。内容の最小サイズが大きいと、単純な均等割りの想定から外れることがあります。

/* 長い内容があると横へ広がる場合がある */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

たとえば、空白のない長い英数字をカード見出しへ入れるケースを考えます。文字列を分割できないまま、その長さを内容由来の最小幅として扱えば、カードを細くする余地が小さくなります。親へwidth:100%を指定しても、子の内容と列の最小サイズという別の条件が消えるわけではありません。

最初に、開発者ツールのGrid表示で列の境界を確認してください。列そのものが親からはみ出しているのか、列は収まるが文字だけが外へ描画されているのかで、変更する場所が異なります。見た目が似ていても、すべてを同じCSSで直そうとしないことが診断の入口です。

列・要素・文字の三つを分けて直す

指定	主に変える対象	これだけでは保証しないこと
minmax(0, 1fr)	Gridの列の最小サイズ	中の長い文字列の折り返し
min-width: 0	Grid・Flexアイテム等の最小幅	子孫の固定幅やwhite-spaceの解除
overflow-wrap: anywhere	分割できない文字列の折り返し	画像や表など文字以外のサイズ調整

列を内容より小さくできる設計なら、最小側を0にしたminmax(0, 1fr)を使います。これはカードの幅を常に0にする指定ではありません。最大側の1frで空間を配分しつつ、最小側の条件を明示する書き方です。構文はMDN：minmax()の構文とサイズ指定で確認できます。

要素側の最小幅も別に確認します。MDN：min-widthとGrid・Flexアイテムの自動最小幅が説明するように、GridやFlexのアイテムではautoの最小幅が内容などから決まる場合があり、常に0とは限りません。縮めたいアイテムへmin-width:0を指定する方法があります。ただし、すべての子孫の制約まで一括で解除する設定ではありません。

minmax(0,1fr)とmin-width:0は、単純な構成では片方だけで列幅の問題が解消する場合もあります。両方が常に必須だと暗記するより、親が列を決め、アイテムも独自の幅制約を持つと理解してください。入れ子のFlexやGridを追加した際にも、どの階層を点検すべきか追いやすくなります。

カード一覧の実装例

次の例では、カードを3列で配置し、画面が狭いときは1列へ切り替えます。HTMLとCSSを同じページへ配置してください。画像や外部ライブラリーを必要としない例です。40remという境界はこのサンプル用の設計値であり、仕様が要求する値ではありません。

<section class="cards" aria-label="関連記事">
  <article class="card">
    <h2 class="card__title">長い文字列を含む記事</h2>
    <p class="card__text">BuildArtifactIdentifierWithoutSpaces0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
    <pre class="code-scroll" tabindex="0" aria-label="横にスクロールできるコード例"><code>const artifactName = "BuildArtifactIdentifierWithoutSpaces0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";</code></pre>
  </article>
  <article class="card">
    <h2 class="card__title">二つ目の記事</h2>
    <p class="card__text">通常の日本語の説明です。</p>
  </article>
  <article class="card">
    <h2 class="card__title">三つ目の記事</h2>
    <p class="card__text">カードの高さは内容に合わせて伸びます。</p>
  </article>
</section>

* { box-sizing: border-box; }

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

.card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid #777;
}

.card__title,
.card__text {
  overflow-wrap: anywhere;
}

.code-scroll {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 40rem) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

見出しと説明文は折り返し、コード部分は横スクロールにしています。コード内の空白や行の並びを保ちたい場合、本文と同じ折り返し方が読みやすいとは限らないためです。スクロール領域へはキーボードで移動できるようtabindexを付け、用途が分かるラベルも指定しました。実機ではフォーカス表示と左右キーでの操作も確認します。

この例のカードは高さを固定していません。長い文章では縦へ伸びます。横はみ出しを避けるために高さまで固定し、見出しや操作を切ってしまうと、別の欠落が生じます。カード全体の高さをそろえたい場合も、まず情報が読める状態を作ったうえで余白の配置を調整してください。

anywhereとbreak-wordの違いを知る

MDN：overflow-wrapと長い文字列の折り返しによると、overflow-wrap:anywhereは通常分割できない長い文字列を必要に応じて折り返し、その折り返しの機会をmin-contentの計算にも反映します。break-wordは見た目の折り返しが似ていても、その機会を同じ計算へ反映しません。内容由来の最小幅を調べるときに意味のある違いです。

ただし、折り返しは内容の読み方に合わせて選びます。URLを説明文として表示する場所なら途中で折り返す設計が便利ですが、照合やコピーが重要な識別子には、横スクロールやコピー操作を用意する方が適する場合もあります。すべての単語を常に細かく分断する指定をサイト全体へ入れる前に、対象の部品を限定してください。

white-space:nowrapが別のルールで付いている場合も確認します。幅の最小値を変えても、折り返さない指定が残れば文字が外へ出る可能性があります。開発者ツールで計算後の値と適用元を確認し、原因となるルールを対象範囲で調整します。強いセレクターや!importantを重ねるだけでは、次の部品でも同じ原因が残りやすくなります。

overflow:hiddenを先に付けない

ページ全体のoverflow-xを隠すと、横スクロールは見えなくなるかもしれません。しかし、はみ出した情報や操作ボタンが読める位置へ戻ったとは限りません。まず列と内容を収め、情報を保つ方針を決めます。装飾としてはみ出す要素を意図して切る場合は、その部品で範囲を限定します。

画像、iframe、表、入力欄の固定幅などが原因なら、文字用のoverflow-wrapを追加しても解決しません。画像は縦横比を保つサイズ調整、幅が必要な表は専用のスクロール領域など、内容に応じた扱いを選びます。横に大きいものを一律に切る処理へまとめない方が、利用者に必要な情報を残せます。

入れ子のレイアウトを外側から確認する

カードの中にFlexの見出し行があり、その中にタイトルとバッジが並ぶ構成なら、縮めたいFlexアイテムも点検対象です。外側のカードが収まっていても、内側のタイトルが内容の最小幅を維持する場合があります。どの箱の右端が最初に親を越えたかを確認し、その階層で対処します。

順序としては、親コンテナーの幅、Gridの列、直接のアイテム、内側のFlexやGrid、最後に文字やメディアを見ます。途中で直ったら、不要になった応急処置を外して再確認します。部品の境界に理由の分かる指定を残すと、将来HTMLが変わったときも調整しやすくなります。

配置先の幅によってカード内部の並べ方も変えたい場合は、CSSコンテナクエリで置き場所に強いカードを作るも参照してください。そちらは切り替え条件の設計、本稿は内容の最小幅によるはみ出しの診断を扱っています。

公開前に確認するケース

ケース	確認したいこと
320px程度の狭い表示	ページ全体に意図しない横スクロールがない
40remの前後	列数が切り替わる前後も本文と余白が読める
長い英数字・URL・日本語	折り返しとコピーの使い勝手が適切
ブラウザーの200%拡大	見出しや操作が欠けずアクセスできる
コードや表の横スクロール	ページ全体ではなく対象領域を操作できる
実際のWebView・対象ブラウザー	採用する値と入力内容の組み合わせで動く

短いダミー文章だけで確認を終えず、CMSに入り得る最長のタイトルや、空白のない入力も用意します。横はみ出しが直った後は、リンクのフォーカス、スクロール領域、カードの高さも確認してください。列を縮められることと、情報を読みやすく保てることを、両方の完了条件にします。

参考資料

W3C：CSS Grid Layout Level 1のトラックサイズと自動最小サイズ

MDN：minmax()の構文とサイズ指定

MDN：min-widthとGrid・Flexアイテムの自動最小幅

MDN：overflow-wrapと長い文字列の折り返し