1. display:grid を指定します
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
display: grid;
gap: 26px;
grid-template-columns: 1fr 1fr 1fr;
→3行目は以下のように書き換え可能です。
grid-template-columns: repeat(3, 1fr);
repeat関数（繰り返す数，要素の幅）
※「fr」は親のサイズに合わせて、均等、比率でサイズ調整する単位です。
この状態では、画面幅を狭めると無理矢理3列入るかたちになり、
スマートフォンでは見づらい状況なっています。
2. minmax()を指定する
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
display: grid;
gap: 26px;
grid-template-columns: repeat(3, minmax(240px, 1fr));
minmax()関数は、最小値と最大値を指定できます。
各カードの幅が240pxまでは可変するように設定しました。
※minmax(最小値，最大値)
最小値＝240px
最大値＝1fr （利用可能な領域を均等に配分する）
カードが小さくなりすぎることは無くなりましたが、
画面を狭めていくとあるポイントから見切れていきます。
2. auto-fit を指定する（完成！）
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
card001
メディアクエリを使用せずに、自然な折り返しを可能にする方法です。repeat()とminmax()がポイントです。
display: grid;
gap: 26px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
auto-fitは設定した幅のカードをできるだけ詰めて表示したい場合に利用します。
これで完成です。