Take the 2-minute tour ×

Looking at the following CSS in a Windows 8 metro style application, what is "fr"?

-ms-grid-columns: 638px 1fr;
share|improve this question
add comment

2 Answers

up vote 17 down vote accepted

It stands for "fraction" or "fractional unit", a proposed unit in CSS Level 3.

From http://www.w3.org/TR/css3-grid-layout/#fraction-values-fr:

Fraction values are new units applicable to the grid-rows and grid-columns properties... The distribution of fractional space occurs after all or content-based row and column sizes have reached their maximum. The total size of the rows or columns is then subtracted from the available space and the remainder is divided proportionately among the fractional rows and columns.

From http://msdn.microsoft.com/en-us/library/windows/apps/hh780610.aspx:

...fractional unit (1FR)... represents one share of all the space available to the grid after fixed-size and auto-sized tracks (rows or columns) are laid out.

Also, from http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/:

1fr is one "fractional unit", which is a way of saying "the remaining space in the element".

share|improve this answer
This makes a lot more sense now. Thanks. Much better than having to use floats and crazy CSS hacks like we had to before. –  Paul Mendoza Mar 10 '12 at 21:18
add comment

Pertaining to your exact question, for this particular example, let's assume that the total available width for the columns is 1200px. Since the first column width is fixed, it will occupy 638px and the remaining space (562px) will be free. Thus, in this case,

1fr = 562px

Now let's assume your styling is as follows:-

-ms-grid-columns: 638px 1fr 2fr;

Then in this case, the remaining free space of 562px will be divided in three parts and the second column will be given 1/3rd space and the third column will be given 2/3rd space.

share|improve this answer
add comment

Your Answer


