Search code examples
csswindows-8internet-explorer-10

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

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

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

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