auto-fill

一言で言うと

列を自動で増やす Grid のキーワード。

もう少し詳しく

CSS Grid の repeat() 関数と組み合わせて使うキーワードで、コンテナの幅に応じて収まるだけのトラックを自動生成します。代表的な書き方は repeat(auto-fill, minmax(200px, 1fr)) で、各トラックの最小幅を 200px・最大幅を 1fr に設定しつつ、余白に空トラックを維持します。

似たキーワードの auto-fit は空トラックを折りたたんで既存のアイテムを伸長させるのに対し、auto-fill は空トラックをそのまま残します。アイテム数が少ないときにレイアウトが伸びてほしくない場合は auto-fill を選びます。

実務でどう使うか

関連する章

Ch143 で詳しく学べます。