1frを二つ書いても等幅にならない？Gridの自動最小幅とminmax(0, 1fr)を比べよう

二列を同じ幅にしたくて、grid-template-columnsへ1fr 1frと書いた。ところが、長いファイル名が入ると片方だけ大きくなり、一覧からはみ出してしまう。余った幅を分けることと、列がどこまで縮めるかは別の条件なんだ。

このページはCSS Gridで列を作ったことがある人向け。列数は二つに固定して、長い一行の文字がある場合の最小幅を確かめる。カードの列数を自動で増減させる話ではないよ。

1frは「最小幅0」の指定ではない

frは、グリッド内の残りの空間を割合に応じて配分する単位。1frと1frなら、同じ条件の列どうしで残りの空間を分け合う。ただし、列の最小幅を考えなくてよいという意味ではない。

minmaxの外で書く1frには、自動の最小値が含まれる。minmax(auto, 1fr)に相当する形であり、内容やグリッド項目の最小サイズの影響を受けるんだ。長い改行できない文字列が、列を細くすることを妨げる場合がある。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

同じ1frが並んでいても、どんな内容でも必ず同じ幅で収まるとは言えないよ。まずは列の大きさと、列の中に入れた項目の最小幅を分けて調べよう。

最小値を0にして比べる

今回の作例では、両方の列を次の形へ切り替えられる。

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

minmax(0, 1fr)は、最小値を0、最大側を1frとして列を定義する指定。今回の固定幅の二列では、長い名前がある列も縮められ、8pxの間隔を除いた幅を二列で分けられる。

ただし「0にすれば内容まで自動で読みやすくなる」という効果ではないよ。列の領域を細くできても、文字や画像がそこからはみ出すことは別に考える必要がある。

作例では、文字を省略する係を内側へ置く

列の変化を観察しやすくするため、作例はセルの内側の文字だけを一行で省略する。

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

この指定をグリッド項目そのものではなく、その内側の要素へ付けている点も条件の一つ。項目自体のoverflowやmin-widthを変えると、最小幅の計算に影響して、比較結果も変わり得るよ。

外側の小さな枠はoverflow:autoで囲んでいる。最初の設定がはみ出しても、記事ページ全体を横へ広げず、枠の中だけで見比べられるよ。

ページ内で列の実寸を確かめよう

1. 「1fr 1fr」を選び、長い名前の列と短い名前の列の幅を見る。
2. 枠内を横へスクロールし、内容が右へ続いていることを確かめる。
3. 「minmax(0, 1fr)を二つ」へ切り替える。
4. 表示欄の二列の実測幅と、枠の内幅・内容全体の幅を比べる。
5. 「最初から試す」で最初の列指定と左端へ戻す。

画面が広くても、作例の枠は最大260px。狭い画面では使える幅まで縮めるので、指定した上限だけでなく、表示される実測値を見てね。

実サイトでは、読める状態も選ぶ

文章なら折り返す、ファイル名なら全文を別に確認できるようにするなど、内容に合う方法が必要になる。列を縮める指定と、重要な情報を隠す判断を一つにしないでね。

項目側のmin-width:0を使う方法もある。どの項目を縮めたいのか、列全体の最小値を変えたいのかを整理し、画像・入力欄・長いURLが混ざった状態で確認しよう。今回は幅や最小値の原因を分けるため、条件を固定した小さな例にしている。

列数の調整はGridのauto-fitとminmax、Flexboxで同じように長い文字が縮まない場合はFlexの最小幅へ。省略する情報の選び方はtext-overflowと重要な内容も参考になるよ。

2026年11月1日にMDNの列指定とminmaxの定義を確認。作例では240px・319px・1280px幅のChromiumで列の実寸、枠内の横スクロール、切り替えとリセットを検証した。