自動フィットグリッド（最小幅指定）
列の数を自分で指定せず、 カードの最小幅だけ決めれば自動で折り返す レスポンシブグリッドです。要は grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) の一行。
解説
列の数を自分で指定せず、カードの最小幅だけ決めれば自動で折り返すレスポンシブグリッドです。要は grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) の一行。各カラムは最小150px・最大は均等配分（1fr）で、画面が広ければ列が増え、狭ければ自動で減って縦積みになります。auto-fit が余ったスペースを既存カラムに分配してくれるため、メディアクエリを一切書かずに端末幅へ追従します。
使う場面
- 商品カードやブログ記事の一覧
- メンバー紹介や実績ギャラリーのサムネ並べ
- 機能・プランを横に並べる比較ブロック
カスタマイズは minmax() の最小幅（150px）と gap（16px）の2つが要点です。最小幅を大きくすると1行に並ぶ枚数が減り、小さくすると詰まって並びます。空き枠を作りたくない場合は auto-fit、列幅を固定したい場合は auto-fill に変えると挙動が変わります。中身の高さがバラついても崩れにくいのが利点で、保守も最小限で済みます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
1行に並ぶカードの数を調整するには？
minmax(150px,1fr) の最小幅 150px を変更します。数値を大きくすると1枚あたりの幅が広がり、同じ画面幅でも並ぶ枚数が減ります。逆に小さくすると枚数が増えます。
auto-fit と auto-fill の違いは？
auto-fit は要素が少ないとき空のカラムを潰して既存カードを引き伸ばします。auto-fill は空のカラムを残すため、カードの幅を一定に保ちたい場合に向きます。用途に応じて使い分けてください。