# auto-fit と auto-fill の違い

> 違いが出るのはアイテムが少ないとき。auto-fitは空きトラックを潰してアイテムを広げ、auto-fillは空きトラックを残してアイテム幅を保ちます。

- URL: https://www.css-dictionary.com/compare/auto-fit-vs-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個のときどうなるか」で検算させると取り違えに気づけます。

## それぞれの詳しい解説

- [grid-auto-fit-fill](https://www.css-dictionary.com/property/grid-auto-fit-fill.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)