Repository navigation
[css-grid] Automatic Minimum Size for grid items should not min against content size #1149
Description
Continuing from #1117 examples 1/2/5/6...
Grid is using the same "automatic minimum size" algo that Flexbox does, which sets the min to the smaller of the content size and the specified/transferred size. This is correct for Flexbox - it gives us a reasonable minimum size that the image won't shrink below. But it serves a different purpose in Grid, effectively setting the layout size of the track while the item itself sizes into that containing block, potentially overflowing it. (Or, in other words, Flexbox actually sizes the item with the information; Grid sizes the track, and then the item lays itself out, and we don't want the item to overflow its track by default.)
Therefore, in Grid it doesn't make as much sense to pay attention to the content size when a specified/transferred size exists. So, we think the right fix is to just change Grid's automatic minimum size to be the specified size if it exists, else the transferred size if it exists, else the content size.
This will make examples 1, 2, 5, and 6 all render basically the same way, with a 200px tall first row, and the image filling that row. (Examples 3, 4, 7, and 8 rely on a different issue, so we won't worry about them here right now.) This gives more sensible results in size-constrained grids when the item's transferred size is larger than its content size, by keeping the contents of the track in sync and avoiding overlap of adjacent grid items.
Note: A similar consideration about overlapping overflow was used in resolving issue 283.
The proposed fix is to define the automatic minimum size for grid items inline in the spec as: the specified size if it exists, else the transferred size if it exists, else the content size.
Activity
mrego commentedon Apr 3, 2017
It's really nice we're finally having a specific text in Grid Layout spec about automatic minimum size. IMHO it was pretty complex to understand the text in Flexbox and how it applies to Grid.
About the proposal to use:
On a first sight it looks good, I don't know about specific use cases though. Probably web authors should be the want checking what makes more sense for them.
atanassov commentedon Aug 1, 2017
Here's a relevant existing test case we have. Based on the resolution of this issue I would expect the result of the green image to be 1x2 rectangle of 100px by 200px.
https://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/html/grid-minimum-size-grid-items-007.htm
css-meeting-bot commentedon Aug 4, 2017
The CSS Working Group just discussed
Automatic Minimum Size for grid items should not min against content size, and agreed to the following resolutions:RESOLVED: is either it's defined size, content size, or transfer sizeThe full IRC log of that discussion
<dauwhe> topic: Automatic Minimum Size for grid items should not min against content size<astearns> github: https://github.com//issues/1149
<dauwhe> TabAtkins: in flex we do to some effort to find minimum size
<dauwhe> ... if it's image we try to figure out what information is important
<dauwhe> ... this is useful because flex uses this to size the image
<dauwhe> ... grid uses the info to size the track, and then lets the image size to the track
<dauwhe> ... the big difference is say you have a specified size of 100px and intrinsic size is 50px
<dauwhe> ... we use 50px in flex
<dauwhe> ... grid doesn't have to worry about shrinking
<dauwhe> ... "So, we think the right fix is to just change Grid's automatic minimum size to be the specified size if it exists, else the transferred size if it exists, else the content size."
<dauwhe> ... this better matches author intent for automatic minimum sizing of images
<dauwhe> (tab draws on whiteboard)
<dauwhe> ... image is 50px
<dauwhe> ... put in grid container, set to 100px
<dauwhe> ... in flex, minimum value is 50, it's allowed to shrink to that
<dauwhe> ... in grid, we prefer to say let's stick with 100, 'cause the author said so
<dauwhe> ... and avoid risk of overflow
<dauwhe> Rossen: additional piece: if you open the test case
<dauwhe> https://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/html/grid-minimum-size-grid-items-007.ht
<dauwhe> TabAtkins: sets itself to 100px, but grid width is 10 x 10
<dauwhe> ... if we went by previous algo, track would be 50px
<dauwhe> ... maintaining aspect ratio is important
<dauwhe> astearns: any other comments?
<dauwhe> Rossen: this one has height set
<dauwhe> ... current spec says minimum of instrinsic and transfer?
<dauwhe> fantasai: use specified if you have it, content if you don't
<dauwhe> TabAtkins: edge does it
<dauwhe> ... any objections?
<dauwhe> astearns: hearing no objection,
<dauwhe> RESOLVED: is either it's defined size, content size, or transfer size
<dauwhe> (do what 1149 says)
<dauwhe> fantasai: there was one about stretching tracks
fantasai commentedon Aug 9, 2017
Edits checked in:
@mrego Would you mind reviewing to make sure this is all sane, since I can't review my own edits? ;) (I mean, I can, but a different set of eyes would be better.)
mrego commentedon Sep 8, 2017
@fantasai I think the new text looks good.
BTW, I'm fixing this on Blink and WebKit and updating the WPT tests accordingly.
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minim…
Merge r221910 - [css-grid] Use transferred size over content size for…
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minimum
[css-grid] Use transferred size over content size for automatic minim…
Merge r221910 - [css-grid] Use transferred size over content size for…