none
Grid layout "fr" measurement (What does it mean?)

    Question

  • With the WinJS -ms-grid layout, what does the "fr" mean when it shows a measurement of "1fr"? I appreciate any help that you can provide. Thank you.

    Tuesday, September 20, 2011 7:23 PM

Answers

  • 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

     

     

    Tuesday, September 20, 2011 7:43 PM

All replies

  • 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

     

     

    Tuesday, September 20, 2011 7:43 PM
  • Thank you for clearing that up! That makes sense and it seems like a very helpful feature! :) Keep up the great work with Windows 8 and everything else! I have never been so excited to be a Microsoft user and a developer on your platforms as I am now! :)

    Tuesday, September 20, 2011 7:49 PM