Re: [css-grid] Resolve Intrinsic Track Sizes: min-content vs auto minimums

On 12/23/2015 03:01 AM, Manuel Rego Casasnovas wrote:
> Hi,
>
> thanks for taking time to dig into this issue.
>
> On 10/12/15 23:18, fantasai wrote:
>> https://lists.w3.org/Archives/Public/www-style/2015Nov/0086.html
>> This is a bug in the spec. :( We've fixed it as follows:
>>   # If the track has an ''auto'' <a>min track sizing function</a>,
>>   # set its <a>base size</a> to the maximum of its items’ “min-size
>>   # contributions”: the value specified by its respective 'min-width'
>>   # or 'min-height' properties (whichever matches the relevant axis)
>>   # if the specified size is ''auto'', or else the item’s <a>min-content
>>   # contribution</a>.
>
> I see that you've added a note too:
>   # Note: For items with a specified minimum size of 'auto''
>   # (the initial value), this is equivalent to a min-content minimum.
>
> I think the new text in the the spec is fixing my previous example, but
> let's use a new example to see if I'm understanding properly the
> difference between auto and min-content minimums.
>
> The base example will be the following (and we'll be playing with the
> values of "grid-template-columns" on the grid container and "width" and
> "min-width" on the item) [1]:
> <div style="display: grid; width: min-content; font: 25px/1 Ahem;">
>    <div style="width: auto; min-width: auto;">XX X</div>
> </div>
>
> 1) width: auto; min-width: auto;
> 1.A) grid-template-columns: auto;        => Column's width: 50px;
> 1.B) grid-template-columns: min-content; => Column's width: 50px;

Yes.

> 2) width: 100px; min-width: auto;
> 2.A) grid-template-columns: auto;        => Column's width: 100px;
> 2.B) grid-template-columns: min-content; => Column's width: 100px;

Yes.

> 3) width: auto; min-width: 0px;
> 3.A) grid-template-columns: auto;        => Column's width: 0px;
> 3.B) grid-template-columns: min-content; => Column's width: 50px;

Not 100% sure on 3.A. It might be 50px. 'auto' as a size generally
passes down any min/max-content constraints, and passes up through
it the min/max-content contribution. The min-content contribution
of the grid item is still 50px, even if its min-width is zero.

> 4) width: 100px; min-width: 0px;
> 4.A) grid-template-columns: auto;        => Column's width: 100px;
> 4.B) grid-template-columns: min-content; => Column's width: 100px;

Yes.

> So, if I got it right, the only difference between auto (A) and
> min-content (B) minimums would be in the case 3) when we have an auto
> width and a specified min-width in the item.
> The rest of situations will have the same behavior in both cases.

The case that's different is if the grid container specifies a width
less than 50px:
   <div style="display: grid; width: 25px; font: 25px/1 Ahem;">
     <div style="width: auto; min-width: auto;">XX X</div>
   </div>
5) width: auto; min-width: 0px;
5.A) grid-template-columns: auto; => Column's width: 25px;
5.B) grid-template-columns: min-content; => Column's width: 50px;

> The change in the spec is fixing case 4), which before was "0px" for
> auto minimums (4.A) and now is "100px".

Yes.

> As a side comment, I think that the links to "auto" in "For auto
> minimums" part of the spec are wrong, they're linking to
> grid-template-columns|rows definition, but I guess they should link to
> "auto" for width|height and "auto" for min-width|height.

Fixed. Thanks. :)

~fantasai

Received on Thursday, 21 January 2016 03:31:10 UTC