CSS 新的长度单位 `fr` 你知道么？

本文译自：An Introduction to the fr CSS unit。首发知乎专栏「前端外刊评论」，介绍了 CSS Grid 规范中引入的一个新的长度单位 fr，咱们一块儿来看看究竟是怎么回事吧，译文走起！

关于 CSS Grid 的激烈讨论处处都是，但我发现不多有讨论 fr 这个新的 CSS 长度单位（规范在这里）的文章。

为了讲清楚，先从一个典型的案例开始，咱们看下面的例子，用 CSS 建立一个网格，这个网格一行四列，每列等宽。

<div class="grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>复制代码

.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}复制代码

codepen.io

在 grid-template-columns 里咱们使用了 repeat()，若是你已经知道了 repeat() 的功能能够跳过本段。它是 CSS Grid 引入的最有爱的特性之一！它是一种缩写方式，本质就是为了减小咱们重复书写多个值的问题。原本咱们能够直接写 grid-template-columns: 25% 25% 25% 25%;，但用 repeat() 看上去更清晰明了，尤为是有不少冗长的宽度表示时（好比 minmax() 表达式）。

repeat 的语法以下：

repeat(number of columns/rows, the column width we want);复制代码

可能你还没发现，目前咱们的 CSS 代码是有点问题的。

首先，为了使用这个可爱的函数，咱们必须作数学题。必须计算一下分红4栏每栏的宽度是百分之多少，不错，这里是 25%。这道题目还算简单，可是若是复杂点咱们就须要让浏览器帮咱们作。还好咱们有 calc() 函数，因而咱们的答案能够是 repeat(4, calc(100%/4))，看起来有点复杂呵……不过还有另一个致命问题：

这个问题就是元素溢出了。4 个 25% 宽的栏加上 10px 的 grid-column-gap 超过了 100%。百分比的工做模式没有问题，但显然结果不是咱们想要的。咱们但愿代码表达的是：每栏的宽度是总宽度的（viewport 的宽度）25%，栏与栏之间的有 10px 的间距。差异很微妙，布局就很尴尬了。

外刊君：repeat(4, calc((100% - 10px * 3)/ 4)) 这样能够工做！

一不当心咱们搞出了滚动条：

codepen.io

这个时候 fr 就持证上岗服务咱们了。

在定义网格时，fr 的用法与其余 CSS 长度单位 %、px、em 等是同样的。用这个神奇的新单位重写一下代码：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}复制代码

codepen.io

demo 看起来没啥变化，四栏等宽（就是 1/4 或者是 25%）。可是，注意！横向的 overflow 消失了。每一个栏的宽度设置为 1fr 后，三个 10px 的间隙首先从总宽度减去，再计算每一个栏的宽度！

你可能会bibi说为啥我非要用这个新的 CSS 单位，我继续坚持使用百分比或者 px 有什么很差？好吧，咱们再看一个更复杂的例子，显然 fr 是更好的方案。在下面这个例子中，最左边一个有一个导航栏，而后右紧跟着20个 column：

这种“切图”需求很常见啊，若是不使用 fr，咱们只能选择使用额外的 grid 或者 calc 来实现。咱们必须像下面这样思考：

栏的宽度 = (viewport 的宽度 - nav 的宽度) /  栏的数量  * 100%复制代码

是，这没问题，可是很丑很痛有没有？一旦咱们更改 nav 的宽度，须要再作一遍数学题。因此啊， fr 这个单位完美处理这个问题，代码可读性很强有没有？

.grid {
  display: grid;
  grid-template-columns: 250px repeat(12, 1fr);
  grid-column-gap: 10px;
}复制代码

codepen.io

咱们的方案就是给第1栏设置一个固定宽度，而后重复建立20个栏“平分剩下的自由空间”（从规范的标准解释是这样）。不须要作任何的数学题！易读，最左边的 nav 能够随意更改，剩下的20个栏会自动伸缩。

好了，一点点不动脑的工做让咱们的界面更容易维护了。就算未来的某个时候再来看代码也很清晰，说简单点，就算辞职了，后来的“切图仔”也不用跳坑！

欢迎微博知乎搜索「前端外刊评论」微信搜索 FrontendMagazine 关注外刊君。