CSS3 grid layout（网格布局）（三）

让我们接着来看网格布局

fr单位

网格轨道可以使用 任何 长度单位进行定义。 网格还引入了一个另外一个长度单位来帮助我们创建灵活的网格轨道，那就是 fr 。fr 代表网格容器中可用空间的一等份，并且受其影响的网格轨道会随着可用空间的变化 增长 或者 收缩 。fr 的数量表示在行或列中 可容纳的网格轨道 的 数量 ，而 fr 值的大小则决定了 网格轨道所占的比例，如下的几个例子将详细解释 。

请看如下代码

    

        
One
        
Two
    

在上面的代码中，我创建了一个类名为 wrapper 的网格容器，当中含有两个网格元素。并且我在其中定义了一个宽为 1fr 的 列轨道。那么效果会是什么样的呢？ 请看下图

我们可以发现这是一个 两行一列 的网格容器，当中含有两个网格元素，并且两个网格元素的宽度各占满了一整列的大小，正如我对 fr 解释所述，在 grid-template-columns 中 只写了一个 fr 值，代表在当前网格容器中， 只存在一个 列轨道。既然只存在一个列轨道，那么 fr 的值也就不重要了，因为无论 fr 值大还是小，表格元素的宽度都将覆盖整列。

那么再添加一个 fr 值会是什么效果呢？

效果如图：

我们可以看到，此时网格容器是一个 一行两列 的布局，当中网格元素的宽度比例为1:1。这是因为我在
grid-template-columns 上设置了两个 fr，并且值的大小均为 1；两个fr 满足 两列，而 值的大小均为1 则满足了 宽度比例为1:1。

现在让我来将第二个 fr 的值的大小改为2 再来看看效果。
不出所料，由于依然存在 两个fr，所以布局仍是 一行两列。又因为第二个 fr的值此时为2 ，所以，两个列轨道的 宽度比例为1:2（并且在不同视口宽度下也是如此，大家可以自行调整浏览器宽度尝试）

接下来，我在网格容器中再追加一个网格元素，让我们来看看在网格轨道的数量小于网格元素时，fr 会产生什么样的效果，修改后的HTML如下（css样式不变，依然是1fr 2fr）；

    

        
One
        
Two
        
Three
    

效果如图
如图，由于网格容器中 只存在两个网格轨道，在同一行中无法放置三个网格元素，所以布局变成了两行两列。比例仍维持1：2。

最后让我们再来测试一下当网格轨道的数量多于网格元素时的效果，修改后的代码如下：

    

        
One
        
Two
        
Three
    

效果如图：
如图，由于网格轨道数量多于网格元素，所以 只需一行 即可容纳三个网格元素，并且比值也符合设置的1:2:3；并且没有网格元素的第四列轨道的占比也为4。

行轨道作用的形式与列轨道是一样的。在此，我只将列轨道的最后一个例子稍作修改，以展示fr作用在行轨道上的样式，其余大家可自行探索。

让我们将最后一个例子中的 grid-template-columns 属性变为 grid-template-rows，其余保持不变；
代码如下

效果如图
参照我最后一个例子的解释，大家可以自行在行轨道上来尝试和理解 fr 单位，本篇博客不在赘述。

有关 fr 单位的补充和更多关于 grid layout（网格布局） ，敬请期待我的后续博文。