https://dotinstall.com/questions/y4kojcm
こちらと内容が似ているように感じたのですが、読んでも理解しきれなかったため伺いたいです。

grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
grid-template-rows: 100px 100px;

上記のとき、説明にあったように列（ columns ）の幅（ x とする）は 100px ≦ x ≦ 1fr かと思います。
ただ、いまいち box6 が box5 の右側に来るタイミングが理解できません。

説明では「ここから広げていって次の列が入るようになったら」「それぞれの幅が 100px に戻ったので（入った）」と表現されていました。
しかし画面幅を広げていっている（＝列幅が大きくなっていっている）点と、100px ≦ x ≦ 1fr であるため 100px は最小値であるはずなのに「戻ったので入った」という意味がよくわかりませんでした。

「 1fr 」の意味がいまいち理解できていないのも原因かもしれません。
理解力が乏しくて申し訳ないのですが、教えていただきたいです。