CSS Gridのauto-fitとauto-fillは、どちらもrepeat()で可能な列数を自動的に作ります。ただし、カード数が少ないときの空列の扱いが異なります。auto-fitは空のトラックを畳み、既存のカードが広がりやすくなります。auto-fillは空列を保持するため、カード幅が必要以上に伸びにくい指定です。
すぐ使えるカード配置
画面幅に合わせてカードが折り返すレイアウトなら、まずauto-fitから試すと分かりやすいです。最小列幅16remを目安にしつつ、極端に狭い画面では幅100%を使うCSSです。
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
}
.card { min-width: 0; }repeat()が列を自動反復し、minmax()が列幅の下限と上限を指定します。1frは余白の分配単位です。min(100%, 16rem)を使うとコンテナーが16remより狭い場合のはみ出しも抑えられます。
auto-fitとauto-fillを比較する
MDNのrepeat()解説では、auto-fitはauto-fillと同様に配置を求めた後、空トラックを畳むと説明されています。カードが列を埋めている場合、両者の見た目はほぼ同じです。
| 指定 | 空トラック | カードが少ない場合 | 適する表示 |
|---|---|---|---|
| auto-fit | 畳む | 残るカードが広がりやすい | 空間を使い切るカード一覧 |
| auto-fill | 残す | カード幅が比較的保たれる | 列の枠を維持したい一覧 |
違いを確認するなら、大きな画面でカードを1〜2件だけ表示するのが近道です。
同じHTMLで設定だけ入れ替える
カードを2件にして、CSSのauto-fitだけをauto-fillへ変更してください。カードに固定widthを付けず、Gridのトラックがどう変わるか観察します。
.cards-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.cards-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1rem;
}auto-fitなら空列が消えてカード列に余白が分配されます。auto-fillでは空列が残ります。ブラウザーの開発者ツールでGridの列の境界を表示すると違いを追いやすくなります。
minmax()で幅が崩れるとき
minmax(16rem, 1fr)だけでは、コンテナーが16remより狭い場合に列がはみ出すことがあります。その場合は、minmax(min(100%, 16rem), 1fr)など下限の指定を調整します。
カードの中に改行できない長いURLがある場合は、トラック指定だけでなく子要素のmin-width、overflow-wrap、固定幅も確認してください。狭い画面の表示問題はauto-fitとauto-fillの違いとは限りません。
用語解説：トラック
CSS Gridの列または行を構成する領域。空の列を畳むか残すかがauto-fitとauto-fillを選ぶ要点です。
どちらを選ぶかのチェックポイント
- 表示件数が少ないときもカードを広く見せたいならauto-fit
- カード数が少なくても列位置や横幅を保ちたいならauto-fill
- 16rem未満の狭い画面で崩れるならminmax()の下限を確認
- カードが広がらないなら子要素のwidthやmax-widthを確認
どちらが常に優れているわけではありません。商品一覧や記事カードなど、0件・1件・複数件の状態を同じ画面で試して決めるのが実用的です。
関連するCSS設計
GridそのものとFlexboxの選択で迷う場合は既存の比較記事、スマートフォン全体の調整ではレスポンシブ基礎記事が参考になります。
（CSS GridとFlexboxの使い分けについては『CSS GridとFlexboxの違い』をご参照ください）
（レスポンシブの基本設計については『CSSレスポンシブ解説』をご参照ください）
よくある疑問
auto-fitとauto-fillが同じ見た目になるのは？
空の列がないと、畳む対象もないためです。広いコンテナーでカードを少数にして比べてください。
auto-fitでもカードが広がらないのは？
カード自体のwidth・max-widthやコンテナー側の制約を確認してください。
レスポンシブにはどちらが必須？
どちらも利用可能です。空列を残したいかどうかで選びます。
まとめ
auto-fitは空の列を畳み、auto-fillは空の列を残します。minmax()は列幅のルールを指定する関数です。カード数が少ない場合の表示と、狭い画面でのはみ出しを確認して使い分けましょう。
今のカード一覧のauto-fitとauto-fillを入れ替え、余白の変化を確認してみてください。
