メディアクエリなしで列数が自動調整されるカードグリッド。repeat(auto-fit, minmax())の1行がこのレシピの本体です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) の意味は「1列あたり最低120pxを確保できる数だけ列を作り、余った幅は1frで均等に分ける」です。コンテナ幅が変わると列数が自動で増減するため、ブレークポイントの管理が不要になります。auto-fitは空の列を潰してカードを引き伸ばすのに対し、auto-fillは空列を残します（カードが少ないときに違いが出ます）。
minmaxの最小値は「カードの内容が崩れない最小幅」を基準に決めます。小さすぎるとテキストが窮屈になります。
メディアクエリを使わないレスポンシブなカードグリッドを作ってください。grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))を使い、auto-fitとauto-fillの違いも説明してください。