¿Qué significa la unidad fr en una aplicación de estilo metro CSS 8 de Windows?

Question

Mirando el siguiente CSS en una aplicación de estilo metro de Windows 8, ¿qué es "fr"?

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

Answer 1

Es sinónimo de "fracción" o "unidad fraccional", una unidad propuesta en el Nivel CSS 3.

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

valores de fracción de nuevas unidades aplicables a la GRID filas y propiedades de columnas de cuadrícula ... La distribución del espacio fraccional se produce después de que todos los tamaños de fila y columna basados ​​en el contenido hayan alcanzado su máximo. El tamaño total de las filas o columnas se resta del espacio disponible y el resto se divide proporcionalmente entre las filas y columnas fraccionarias.

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

... unidad fraccional (1FR) ... representa una acción de todo el espacio disponible a la red después de tamaño fijo y-auto tamaño pistas (filas o columnas) están dispuestos.

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

1fr es una "unidad fraccional", que es una forma de decir "el espacio restante en el elemento".

Answer 2

En relación con su pregunta exacta, para este ejemplo en particular, supongamos que el ancho total disponible para las columnas es de 1200px. Dado que el ancho de la primera columna es fijo, ocupará 638px y el espacio restante (562px) será libre. Por lo tanto, en este caso,

1fr = 562px

Ahora vamos a suponer que su estilo es el siguiente: -

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

Luego, en este caso, se dividirá el espacio libre restante de 562px en tres partes y la segunda columna tendrá un espacio de 1/3 y la tercera columna tendrá un espacio de 2/3.