オートフィット カードグリッド
オートフィット カードグリッドは、画面幅に応じてカードの列数が自動で増減する万能なレイアウトです。この実装の核は grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) の一行で、JavaScript は使いません。
解説
オートフィット カードグリッドは、画面幅に応じてカードの列数が自動で増減する万能なレイアウトです。この実装の核は grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) の一行で、JavaScript は使いません。minmax(140px,1fr) が「最低140px、空きがあれば均等に広がる」というルールを作り、auto-fit が入るだけカードを並べて余白を詰めます。メディアクエリを書かなくても、広い画面では多列、狭い画面では少列へと滑らかに変わります。
向いている用途
- 商品やサービスのカード一覧
- ブログ記事やお知らせのサムネイル並べ
- 機能・特長のアイコンカード
カードの最小幅は minmax の 140px、間隔は gap で調整します。最小幅を大きくすると列が減り、小さくすると増えます。枚数が中途半端でも左から自然に詰まるため、要素数が変わる動的な一覧に特に向いています。角丸や影はカードの border-radius と box-shadow で整えられます。
使用例・適したシーン
- 商品一覧表示
- ブログ記事カード一覧
- メンバー一覧
よくある質問
メディアクエリなしで本当にレスポンシブになりますか
はい。auto-fit と minmax の組み合わせが画面幅を見て列数を自動調整するため、ブレークポイントを書かなくても狭い画面では列が減ります。
カードを大きく見せて列を減らしたいです
minmax の140pxを大きくしてください。例えば220pxにすると1枚あたりの最小幅が広がり、結果として並ぶ列数が減ります。