理解 grid 布局中的长度单位 fr

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 很好理解了。