我们已经看到了 fr 单元如何在网格容器中分配一定比例的可用空间到我们的网格轨道。当与 minmax() 函数结合使用时，fr 单元可以给我们与弹性盒中的 flex 属性非常相似的行为——同时仍然可以创建二维布局。

之前我们通过示例验证了一维布局和二维布局的差异，可以发现这两种布局方式对响应式的处理存在着不同。对于弹性布局，当我们拖拽以改变浏览器大小时，弹性盒会根据可用空间适当的调整行中元素的个数。当有足够的空间时，全部的 5 个元素全部在一行展示，当容器变的过窄时，每行则只能展示一个元素。

相较而言，网格布局则始终保持 3 列轨道。轨道会自动拉伸，但始终会保持我们定义网格时的轨道数量，也就是 3 个。

我们可以通过使用 repeat 方法，配合 auto-fill 和 auto-fit 属性，创建类似弹性盒的效果，同时保证内容严格按照行和列的固定规则排列。

在接下来的示例中，在 repeat 方法中使用 auto-fill 属性替换整数值，并且设置轨道的宽度为 200px。这意味着网格布局将会根据容器的宽度创建最多的宽度为 200px 的列轨道。