auto-fillを使うと、

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

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

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