Repository navigation
[css-grid] Implied Minimum Size of Grid Items #283
Description
As we're approaching the CR stage I was checking again the "Implied Minimum Size of Grid Items" section of the spec.
It's kind of weird that the spec points now again to the text in Flexbox. It was like that originally then it had its own Grid text and now it points again to Flexbox. The problem I found with this is that I'm not 100% sure about some stuff, e.g. the Flexbox spec talks about main-axis, I'm assuming it applies in both axis on grid items. Also when I try to compare with Flexbox, I usually forget about flex-shrink: 1; which is the default in Flebox and creates different results that what I see on Grid.
After trying to understand it properly I was reviewing the W3C tests I created some time ago and updated them. It'd be really nice if someone could verify that my tests are right as some fail on Chromium and another on Firefox.
Please @fantasai and/or @tabatkins could you review the tests (they're just 9 simple tests where the expected result is just a 100x100 green box). Probably @MatsPalmgren would be interested in taking a look too.
The status on Chormium and Firefox right now is not really important, as I'm not 100% sure if the tests are right. Thanks! 😉
Activity
fantasai commentedon Jul 13, 2016
So... as I was editing this to clarify that it applies to both axes (as you mention), I realized that the reason it applies to one axis and not the other in Flexbox is because of the flexibility of the items. I'm wondering if that's something we need to take into account here?
[css-grid] Clarifications to application of automatic minimum size (i…
mrego commentedon Jul 14, 2016
I don't know what's the goal in Grid Layout, but it's supposed that both directions on the grid are symmetric (at least in most situations if not all).
However it's true that Flexbox only do that in one axis (quick example comparing flexbox and grid).
fantasai commentedon Jul 14, 2016
I think one of the goals is "do the most expected thing, given Flexbox and author expectations", and of course "be symmetric across axes". The
min-width/height: autobehavior was added in part for handlingauto-minimum-sized tracks--to make their content-based minimum more configurable. We could, as an alternative to having it always apply, only apply the automatic minimum on items in such tracks.fantasai commentedon Jul 18, 2016
Thinking about this some more, at the very least, the grid's maximum track-sizing function should clamp the implied minimum the same way a specified size on the item would. I'm pretty sure that's what authors would expect.
mrego commentedon Jul 18, 2016
About author expectations I don't really know what they would be expecting in this situation. Just to make it clear, I'm attaching an example of a 20px x 20px Flexbox and Grid to show the difference between both. Flexbox applies
min-size: auto;only in 1 axis and Grid where it applies in both axis.About your comment:
I'm not sure if I'm getting it or not. Do you mean that when you use
min-contentfor a track size, it doesn't use themin-sizebut it uses the content; and if you useautofor the track size, it checks themin-sizeand uses it (and whenmin-sizeisautothe behavior is equivalent tomin-content)?fantasai commentedon Jul 18, 2016
Yes, that's exactly what I meant. That is the reason we changed 'auto' to be something distinct from minmax(min-content, max-content).
fantasai commentedon Jul 18, 2016
Proposed wording (append to first paragraph of Implied Minimum Size of Grid Items):
mrego commentedon Jul 18, 2016
I always thought that the idea of
min-size: autowas to avoid shrink-to-fit by default.At least in Flexbox it avoids that the item shrink-to-fit in the flex container, when the flex container has a fixed width (like in the previous example). Maybe there were other reasons to add it in Flexbox that I'm missing.
Are we sure we want something different in Grid Layout? So the items will shrink-to-fit in their grid area.
45 remaining items
[css-grid] Update implied minimum size of grid items tests
[css-grid] Add more tests for Implied Minimum Size of Grid Items section
mrego commentedon Feb 15, 2017
Thanks for resolving this issue, we've been working on adding tests for this feature to the
csswg-testrepository (18 tests total):It'd be nice if you could take a look to them and verify that they're right or not.
[css-grid] Update implied minimum size of grid items tests
[css-grid] Add more tests for Implied Minimum Size of Grid Items section
[css-grid] Stretch should grow and shrink items to fit its grid area
Merge r213449 - [css-grid] Stretch should grow and shrink items to fi…
mrego commentedon Nov 20, 2017
I believe this comment is wrong, and thus the following test is wrong too http://w3c-test.org/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html
At least Firefox and Edge show a red rectangle there (in the current version as of 20th Nov 2017). Both Blink and WebKit show a green one, because I implemented both wrong following the assumption that the previous comment is right.
Basically this is wrong because the automatic minimum size has to be clamped as the max track sizing function is fixed. So in the case of
minmax(auto, 0px)the automatic minimum size of the item gets clamped to 0px instead of 250px.The Chromium bug is reported and will be fixed in the coming days: https://bugs.chromium.org/p/chromium/issues/detail?id=786971
Merge r213449 - [css-grid] Stretch should grow and shrink items to fi…
Mapping of boxes match mapping in Fill and Stroke spec. #283