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

We've added support for multi-column `column-gap` percentages in both Blink and WebKit, but we're not using the last resolution where they should resolve to zero for content-based containers.
We're treating them as zero to compute intrinsic size and then resolving during layout.
That's working the same in all browsers that have `column-gap` percentage support for multi-column (Chromium, Safari and Edge).
There's a new WPT test that verifies those cases: http://w3c-test.org/css/css-multicol/multicol-gap-percentage-001.html

Why we're not following the last text in the spec?
Because in Blink/WebKit it's not possible for us right now to know during layout that a multicol container is content-based or not. We could try to implement that, but I believe it'll be quite complex and could bring performance penalties, e.g. if you have `width: auto` you'll need to look through all your parents to check if any of them has `width: min-content` and you'll be content-based sized then (and many other different scenarios).

At the same time I realized that resolving the percentages gaps in grid containers doesn't imply that you have overflow.
Overflow happens in some cases like:
```html
<div style="display: inline-grid; border: thick dotted;
            grid-template-columns: auto auto; grid-column-gap: 20%;">
  <div style="grid-column: 1; background: magenta;">Hello</div>
  <div style="grid-column: 2; background: cyan;">World!</div>
</div>
```

![Output of the previous example where overflow is visible](https://user-images.githubusercontent.com/11602/35565808-535bcbae-05bf-11e8-833b-68f93c1da836.png)

But if you have more text, then the overflow is gone:
```html
<div style="display: inline-grid; border: thick dotted;
            grid-template-columns: auto auto; grid-column-gap: 20%;">
  <div style="grid-column: 1; background: magenta;">Hello World!</div>
  <div style="grid-column: 2; background: cyan;">This is just an example.</div>
</div>
```

![Output of the previous example where you have no overflow](https://user-images.githubusercontent.com/11602/35565828-629484f8-05bf-11e8-8fa9-3d8717f08e57.png)

With the last resolution, the gap should be zero and you won't have overflow in any case.

![Output of the both examples resolving the gap as zero](https://user-images.githubusercontent.com/11602/35565847-79dbd134-05bf-11e8-9844-9df404da34cb.png)



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

Received on Tuesday, 30 January 2018 12:18:55 UTC