auto-fillの挙動がよくわかりません

例を出しながら説明していきます。
2020年6月7日
ユーザー

auto-fillを使うと、

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   grid-template-rows: 100px 100px ;
}

とした場合、列の幅は1frなので、可能な限り伸びてくれると思うのですが、
動画のようにブラウザ幅を伸ばした時、グリッドが一定の幅以上になると、次の要素を配置したり、配置する要素がなくなると、さらに空白のグリッドを作っていく挙動になると思うのですが、
どうして、列の幅が可変になっているのに、そのような動作になるのでしょうか?

どこでこれ以上は伸ばせませんよ、と判断しているのでしょう?

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(7)