Re: [csswg-drafts] [css-grid] Percentages and intrinsic size

For widths that would cause that a percentage track and a percentage 
gap are not equivalent (which probably is not bad).
For example:
```html
  <div style="display: inline-grid; font: 10px/1 Ahem; border: dotted;
                    grid-template-columns: 50px 20% 50px;">
    <div style="grid-column: 1;">X</div>
    <div style="grid-column: 3;">X</div>
    <div style="grid-column: 1 / span 3;">XXXXXXXXXXXXXXX</div>
  </div>
```

![Grid using percentage 
track](https://cloud.githubusercontent.com/assets/11602/22975721/f4ed0da2-f387-11e6-81f8-785963403c22.png)

During intrinsic size computation, the `20%` is treated as `auto`, so 
the size of the columns is `50px 50px 50px` (total size of the grid 
container is `150px`).
Then during the actual layout the percentage is resolved `20% of 150px
 = 30px`. So the final size of the colums is `50px 30px 50px`.


Then if we've a similar example but using gaps:
```html
  <div style="display: inline-grid; font: 10px/1 Ahem; border: dotted;
                    grid-template-columns: 50px 50px; grid-gap: 20%;">
    <div style="grid-column: 1;">X</div>
    <div style="grid-column: 2;">X</div>
    <div style="grid-column: 1 / span 2;">XXXXXXXXXXXXXXX</div>
  </div>
```

![Grid using percentage 
gaps](https://cloud.githubusercontent.com/assets/11602/22975737/febb1af4-f387-11e6-9784-ea14b9a19561.png)

During intrinsic size computation, the percentage track is treated as 
`0px` (as it's an empty track). So the size of the columns is `50px 
50px` (with a `0px` gap in between).
Later during layout the percentage is resolved `20% of 100px = 20px`. 
And the final size of the columns is still `50px 50px` but with a 
`20px` gap.

If we want to have the same output in both cases, a possible solution 
would be to treat percentage gaps as an `auto` track during intrinsic 
size computation (that would be the same we do for percentage tracks).
However for heights that would lead to similar issues that we've with 
percentage tracks, that the same percentage can be end up being 
different sizes if the height is indefinite ([check example in a 
previous 
comment](https://github.com/w3c/csswg-drafts/issues/509#issuecomment-248861020)).
 And I guess we don't want that the size of 2 percentage gaps is not 
the same.


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

Received on Wednesday, 15 February 2017 13:12:49 UTC