比較記事一覧に戻る
auto-fit と auto-fill の違い
TL;DR — ひとことで言うと
違いが出るのはアイテムが少ないとき。auto-fitは空きトラックを潰してアイテムを広げ、auto-fillは空きトラックを残してアイテム幅を保ちます。
比較表
| 観点 | auto-fit | auto-fill |
|---|---|---|
| 空トラックの扱い | 0に潰す（アイテムが領域いっぱいに広がる） | 幅を保って残す（右側に空きが見える） |
| アイテム1個のとき | 1個がコンテナ幅いっぱいに伸びる | 1個分の幅のまま左に配置される |
| アイテムが十分あるとき | 同じ見た目になる | 同じ見た目になる |
| 向いている場面 | 件数が変動する一覧を常に埋めたい | カードサイズを揃えたい（ダッシュボード等） |
使い分けの指針
迷ったらauto-fitが無難です（少数でも間延びして見えにくい）。カードの幅が揃っていることが重要なUIではauto-fillを選びます。定番のminmax(240px, 1fr)はコンテナが240px未満ではみ出すため、minmax(min(240px, 100%), 1fr)と書いておくと小画面でも安全です。
🤖 AIがよくやる取り違え
auto-fitとauto-fillの挙動説明はAIがしばしば逆にします。「アイテム1個のときどうなるか」で検算させると取り違えに気づけます。