What does the fr unit in a CSS Windows 8 metro style application mean?

Question

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

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

Answer 1

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

From https://www.w3.org/TR/css3-grid-layout/#fr-unit:

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".

Answer 2

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.