1fr is one "fractional unit", which is a way of saying "the remaining space in the element".
Let's say that you have an element that is 300px wide and 300px tall e.g.
#container {
width: 300px;
height: 300px;
display: -ms-grid;
}
Now if you defined the -ms-grid-columns property as "1fr" that would mean you had one column that was 300 pixels wide. If you defined it as "1fr 1fr 1fr" that would mean you have three columns that are each 100pixels wide. The nice thing here is
you only are worried about the relative sizing of grid pieces -- if you made the container bigger it would scale to each of the columns.
Of course sometimes you want fixed sizes, which you can just use inline (e.g. 100px 1fr would make the first column 100pixels wide and give the remaining space of 200px to the second column.)
A complete example is available on the IE 10 developer guide:
http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSGrid
You can also check out the full draft spec here:
http://www.w3.org/TR/css3-grid-layout/ which covers advances topics like the minmax() function.
Cheers,
-Jeff
