小溪

CSS 中有很多的长度单位，fr 也是其中之一。

fr 单位专用于 grid 布局，意为 fraction（分数），额，好像也不是很好理解~

对比 px（像素）、em（文字）、vw（窗口），fr 好像缺了一个中文名字，来帮助大家理解。

所以我自告奋勇，凭借对 grid 布局还自觉得比较理解的基础上，给 fr 起了一个中文名字：份（儿），代表占剩余空间份数，这个剩余空间是指除去已知的宽度（包括px、%、grid 间隔等）之后的剩余空间。

读音相近，意思也差不多，我个人对这个名字还是比较满意的~

grid-template-columns: 150px 1fr;

//grid 容器分为了2列，第一列宽度150px，第二列占剩余空间1份儿，因为剩余空间只分成了1份儿，所以第二列也就是全部剩余空间。这种情况下，第二列写 100fr 也是相同的效果。

grid-template-columns: 150px 2fr 3fr;

//grid 容器分为了3列，第一列宽度150px，第二列占剩余空间（100% - 150px）的2份儿，第三列占剩余空间3份儿。也就是剩余空间总共分为了 2+3=5 份儿，第二列占2份儿，第三列占3份儿。

怎么样，是不是觉得 fr 很好理解了。