Re: [csswg-drafts] [css-grid] Resolving 'fr' flexible lengths during intrinsic sizing of grid items

The Grid spec is still somewhat misleading. Consider the part of the spec:
https://drafts.csswg.org/css-grid/#fr-unit

In this part, the spec we refer to "free space" and show <flex> * <free space> / <sum of all flex factors> as shares of free space for each track.

free space is defined as: (https://drafts.csswg.org/css-grid/#free-space)
Equal to the available grid space minus the sum of the base sizes of all the grid tracks (including gutters), floored at zero. If available grid space is indefinite, the free space is indefinite as well. 

This implies that for example like : (https://jsfiddle.net/73oq0wqc/)
```
<div style="display:grid;background: orange; -ms-grid-columns:minmax(50px, 1fr) minmax(50px, 2fr); grid-template-columns: minmax(50px, 1fr) minmax(50px, 2fr);width:150px;border:5px solid red;">
  <div style="-ms-grid-column: 1;grid-column-start:1;background:yellow;height:10px;"></div>
  <div style="-ms-grid-column: 2;grid-column-start:2;background:yellow;background:lime;height:10px;"></div>
</div>
```
Here, both tracks have base size of 50px, the the free space is 150 - 50 - 50 = 50. And two tracks divide this 50px 1 to 2. But that is not what is happening. Instead, the final track size is 50px and 100px in all browsers.

Finding the size for fr (https://drafts.csswg.org/css-grid/#algo-find-fr-size), "Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks. " note that this time only minus base size of non-flexible tracks. In our example, both are flexible tracks, so “leftover space” is the entire 150px.

A similar issue arises when the sum of fr-unit is less than one.

In https://drafts.csswg.org/css-grid/#fr-unit , there is a note: "Note: If the sum of the flex factors is less than 1, they’ll take up only a corresponding fraction of the free space, rather than expanding to fill the entire thing. This is similar to how Flexbox [CSS-FLEXBOX-1] acts when the sum of the flex values is less than 1. "

This implies that the following example: (https://jsfiddle.net/kb0exLay/)
```
<div style="display:grid;background: orange; -ms-grid-columns:minmax(50px, 0.3fr) minmax(50px, 0.6fr); grid-template-columns: minmax(50px, 0.3fr) minmax(50px, 0.6fr);width:200px;border:5px solid red;">
  <div style="-ms-grid-column: 1;grid-column-start:1;background:yellow;height:10px;"></div>
  <div style="-ms-grid-column: 2;grid-column-start:2;background:yellow;background:lime;height:10px;"></div>
</div>
```

Free space is 200 - 50 -50 = 100. And the base on the note above, 100*0.9 is consumed by two fr tracks, remaining only 10px. 
In current implementations of Chrome and Firefox the remaining size is 20px and the two tracks consume 180px.  Again, agreeing with https://drafts.csswg.org/css-grid/#algo-find-fr-size. 

Note that https://drafts.csswg.org/css-grid/#algo-find-fr-size is quite different from what Edge does but we could update our implementation for interop.

One more part that is not entirely clear is determining the size of container.

For width: https://jsfiddle.net/Lbvz57zj/

Firefox appears to be determining the size of the box based on https://drafts.csswg.org/css-grid/#intrinsic-sizes. And then in second pass, use the determined width as definite 
while distributing flexible sizes.
 
But in Chrome, they appear to be doing  https://drafts.csswg.org/css-grid/#algo-find-fr-size directly with indefinite width. After one pass, they are doing it again with width from first pass.
 
They might be doing this due to https://drafts.csswg.org/css-grid/#algo-terms saying:
"
available grid space 
Independently in each dimension, the available grid space is: 
If the grid container’s size is definite, then use the size of the resulting content box.
If the grid container is being sized under a min-content constraint or max-content constraint , then the available grid space is that constraint (and is indefinite).
"
In both Firefox and Chrome, there are left over space when sum of fr-unit is less than one.
 
For height:
https://jsfiddle.net/4xhmato4/
 
Firefox and Chrome both appears to be doing one pass of https://drafts.csswg.org/css-grid/#algo-find-fr-size with indefinite space. 
As a result, there is no left over space even when sum of fr-unit is less than one.

-- 
GitHub Notification of comment by atanassov
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1120#issuecomment-296131718 using your GitHub account

Received on Friday, 21 April 2017 08:49:04 UTC