グリッドで自動的に列数を調整する関数です。repeat(auto-fit, minmax(最小幅, 1fr))の形式で、コンテナ幅に応じて自動的にカラム数が変わるレスポンシブグリッドの実装に必須です。
grid-template-columns: repeat(auto-fit | auto-fill, <track-size>)任意値: grid-cols-[repeat(auto-fit,minmax(120px,1fr))]
auto-fit / auto-fill 専用のユーティリティは無く、任意値で書く。頻出ならテーマにカスタム登録する。
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));最小250pxでコンテナ幅に応じて列数を自動調整
grid-template-columns: repeat(auto-fill, 200px);200px固定幅で可能な限り多くの列を作成
auto-fitは余った空間を埋める、auto-fillは空の列も作成する。
auto-fitとauto-fillの違いはAIも逆に説明しがちです: アイテムが少ないとき、auto-fitは空トラックを潰してアイテムを広げ、auto-fillは空トラックを残します。また定番のminmax(240px, 1fr)は、コンテナが240px未満になるとはみ出すため、minmax(min(240px, 100%), 1fr)としておくと小画面でも安全です（この防御はAIはまず出しません）。
メディアクエリなしのレスポンシブカードグリッドを、小画面ではみ出さない防御込み（minmax+min）で書いて
auto-fitとauto-fillの違いを、アイテムが1個しかない場合の見え方で説明して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。