CSS Grid使用auto-fill创建列时1fr的配合原理疑问

我们可以把这行代码拆成三个核心规则逐层理解：

• auto-fill：浏览器会先计算当前网格容器的可用宽度，在满足每列最小宽度要求的前提下，尽可能多地生成列，不会提前预留空间。
• minmax(200px, 1fr)：为单个列设置宽度约束：列宽最小不能低于200px，最大可以占用1份剩余空间。
• 二者配合的完整运行流程：
  1. 第一步先算列数：浏览器用容器总宽度除以最小列宽200px，向下取整得到最大可容纳的列数N。比如容器宽度为900px时，900/200=4.5，向下取整得到N=4。
  2. 第二步分配宽度：因为所有列的最大宽度都设置为1fr，浏览器会把容器总宽度平均分给N列，每列最终宽度=容器总宽度/N。因为N是按最小200px计算得到的，所以最终宽度必然≥200px，完全符合minmax的约束规则。
  3. 动态适配逻辑：当容器宽度发生变化时，浏览器会重复上面两个步骤重新计算列数和列宽：如果容器宽度收缩到450px，N=2，每列宽度自动变为225px；如果容器收缩到250px，N=1，列宽直接占满250px。

补充说明：如果把minmax的上限换成固定值（比如300px），当容器宽度大于N*300px时，右侧会出现空白区域；而用1fr作为上限的作用就是让列自动平分所有剩余空间，保证容器被完全填满，同时列宽不会低于最小值。

内容的提问来源于stack exchange，提问作者renakre