box6 が box5 の右側に来るタイミングが理解できません

図を使って詳しく説明していきます。
2021年9月25日
ユーザー

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 」の意味がいまいち理解できていないのも原因かもしれません。
理解力が乏しくて申し訳ないのですが、教えていただきたいです。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?