你知道css单位fr吗？

fr是css一个比较新潮的单位，在Grid布局中常见到它的身影。

这里回答了两个问题：

1. fr是什么？能帮助解决什么问题？
2. fr有趣的实践情况——和其他单位混合使用

fr是什么？能帮助解决什么问题？

这里有一段简单grid布局demo：

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

/*主要css样式*/
.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}

细心的朋友会发现在设置grid-template-columns: repeat(4,25%)和grid-column-gap:10px之后，页面的底部是会有水平方向滚动条的。因为在算每列宽度的时候没有将间隔给剔除。

fr正是被用于优雅地解决这样的问题，而不用自己手动calc(..)去计算：

/*css修改代码*/
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}

fr有趣的实践情况——和其他单位混合使用

比如要实现这样的布局：左侧是固定宽度的导航条，右侧所有列均匀瓜分剩余空间

.grid {
  display: grid;
  grid-template-columns: 250px repeat(12, 1fr);	/*注意这里和px的混合使用*/
  grid-column-gap: 10px;
}

小结

fr是在看Grid布局中遇到的陌生的css单位值，平时用的也比较少。学习了css tricks上的An Introduction to the fr CSS unit ，讲得挺通俗易懂。css也在朝着一个“智能”的方向，挺博大精深的。也强烈推荐css tricks，网页设计风格很喜欢，介绍也很仔细。