Imagine the following example:
<div style="display: grid; width: 200px; border: solid thick;
grid-template-columns: repeat(auto-fill, minmax(200px, 100px));
grid-auto-rows: 100px;">
<div style="background: magenta;"></div>
<div style="background: cyan;"></div>
<div style="background: yellow;"></div>
</div>
All implementations (Chromium, Firefox, WebKit and Edge) render it the same way. The use the 2nd argument of minmax(200px, 100px) to calculate the number of repetitions,
so they consider there are 2 columns. Then we have overflow because columns are 200px width.
I guess the reason for that is the following text in the spec:
if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking gap into account)
The max track sizing function is:
If the track was sized with a minmax() function, this is the second argument to that function
It's true that minmax() definition already talks about the case were min is bigger than max:
If the max is less than the min, then the max will be floored by the min (essentially yielding minmax(min, min))
But it seems that none of the implementations catch that detail.
It seems we need to use the min in this case, so the grid of the example has only 1 column, unless there are some other weird implications from using the min in this case. So I guess that the spec text should be updated to be clearer about that and avoid similar misunderstandings in the future.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3
