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

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.

Leave a Comment