カード自動グリッド（auto-fill）
カードを並べると、画面幅に応じて列数が自動で増減するレスポンシブグリッドです。要はメディアクエリを書かなくても折り返してくれる仕組みで、 grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) がその心臓部です。
解説
カードを並べると、画面幅に応じて列数が自動で増減するレスポンシブグリッドです。要はメディアクエリを書かなくても折り返してくれる仕組みで、grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) がその心臓部です。各カードは最低160pxを確保しつつ、余白があれば 1fr で均等に広がります。幅が足りなくなれば自動的に次の行へ折り返すため、スマホからワイド画面まで1つの指定で対応できます。
使う場面
- 商品一覧やブログ記事のカード表示
- メンバー紹介やサービス一覧のタイル
- 列数を端末ごとに細かく指定したくない時
カードの最小幅は minmax の160pxを変えると調整でき、大きくすると1行あたりの枚数が減ります。カード同士の間隔は gap で揃えています。auto-fill は空きがあっても枠を確保するのに対し、auto-fit にすると余った列を詰めてカードを伸ばすので、用途に応じて使い分けてください。注意点として、内容量がカードごとに違うと高さがバラつきます。揃えたい場合は内部の要素を flex で整えるか、抜粋文の行数を揃えると見た目が安定します。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
列数を変えたいのですが？
列数は直接指定しません。minmaxの最小幅（例では160px）を変えると、自動で1行あたりの枚数が変わります。値を大きくすると枚数が減り、小さくすると増えます。
auto-fillとauto-fitの違いは？
auto-fillは空きスペースにも見えない列の枠を確保します。auto-fitは余った列を畳んで、残ったカードを横いっぱいに引き伸ばします。カードを常に幅いっぱいにしたいならauto-fitが向いています。