CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章，咱们就来一起看看这个特性有什么特性，给我们又能带来什么好处。感兴趣的同学，请继续往下阅读。

简介

在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在grid-template-columns或grid-template-rows可以使用px、rem、vw、100%等CSS单位来设置大小，除此之外，CSS网格还引入了另一个长度单位来帮助我们创建网格轨道大小。这个新单位就是我们今天要聊的fr单位。大家喜欢把它称为分数单位。那么他究竟有什么作用呢？

在MDN是这样描述的：

新的fr单位代表网格容器中可用空间的一等份。

就从这样的描述或许还是会令人感到困惑。不用担心，我们继续往下阅读，我想可以帮你解惑的。

对比性思考

fr是代表网格容器中可用空间的一等份，即1fr。如果是2fr那么就是把容器剩余的空间分成两等份。看到这里，是否会想起Flexbox布局中的flex呢？比如我们有这样的一个示例：

<div class="flex">
    <aside>Sidebar</aside>
    <main>Main</main>
</div>

.flex {
    width: 600px;
    background: orange;
    display: flex;
    min-height: 50vh;
}

aside {
    width: 200px;
    background: #f36;
}
main {
    margin-left: 20px;
    background: #f63;
    flex: 1;
}