同じ60文字で修正前後を比べる
作品一覧のカードを2列にしたとき、短い説明では気づかなかった崩れが、URLや長い英数字で起きることがあります。下は、その条件だけを小さく再現した自作例です。「修正を適用する」を押すと、文字を削らずに列幅と折り返しを変えます。
最小幅と折り返しを分ける
- まず修正前の「枠の内側」と「内容」の幅を見ます。内容の方が大きければ、その枠の中ではみ出しています。
- 「修正を適用する」を押します。列の指定が1frからminmax(0, 1fr)へ変わります。
- 同時に、英数字の段落へoverflow-wrap: anywhereを付けます。文字を途中で折り返し、細くした列の中へ収めます。
- もう一度押して戻します。文字数が変わらなくても、幅と表示が変わることを比べます。
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.token { overflow-wrap: anywhere; }MDNのgrid-template-columnsの説明では、minmaxの外で使うfrには自動の最小幅があることを確認できます。ここでは最小幅を0にし、文字の折り返しも指定しました。minmaxだけであらゆる内容が収まる、という意味ではありません。
自分のページで確かめる
2026年10月18日、同じHTMLの修正前後をPC幅と狭い幅で操作し、枠内のclientWidthとscrollWidthを比較しました。数字は画面幅に応じてその場で再計算するため、固定の測定値として載せていません。折り返すとカードの高さは増えます。文章が長いときの縦方向の読みやすさも、別に確認してください。
画像や表、コードの空白を保ちたい表示には、この文字用の指定をそのまま当てない方がよい場合があります。横スクロールで読むべき内容をoverflow: hiddenで隠すと、読めない部分が残ります。内容を見せたまま、何が幅を押し広げているか調べます。
列の比率をまず見ながら決めたい場合はLayoutit Gridの実操作例へ。画面全体の横はみ出しはスマホ幅の確認記事も参照できます。Xの直近投稿も調べましたが、この修正が新しい流行だとは確認していません。HTMLは編集部の自作・CC0です。全ブラウザやスマホ実機での動作は未確認です。