Re: [css-grid] Layout algo question - why keep an infinity around in the fourth phase?

On Thu, Mar 20, 2014 at 6:53 PM, Peter Salas <psalas@microsoft.com> wrote:
> Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> The Grid layout "figure out how wide min-content and max-content tracks
>> are" step is repeated once for each set of items with a given span, and in
>> each iteration, goes through 4 phases.
>>
>> The first time a track goes through the 3rd phase, if its "max" was infinite
>> (caused by a max-content size), it gets corrected to a finite value.  However,
>> the layout algorithm currently states that in the 4th phase of the same
>> iteration, it has to be treated as if it was still infinite.
>>
>> Why does this occur?
>
> You're wondering about the existence of "SpanGroupInWhichMaxBreadthWasMadeFinite" in the Microsoft algorithm, right?
>
> Consider the following case:
>
> Two "auto" tracks (i.e. "minmax(min-content, max-content) minmax(min-content, max-content)")
> Item 1 is in track 1, and has min-content = max-content = 10.
> Item 2 spans tracks 1 and 2, and has min-content = 30, max-content = 100.
>
> After resolving min-content/max-content for the first item, we have this.
>
> track 1:
>         used breadth = 10
>         max breadth = 10
>
> track 2:
>         used breadth = 0
>         max breadth = infinity
>
> Then we resolve min-content/max-content for the second item.
>
> Phase 1 sets the used breadth of track 2 to 20 so that the two tracks' used breadths sum to 30.
> Phase 2 does nothing because there are no relevant tracks.
> Phase 3 sets the max breadth of track 2 to 20 so that the two tracks' max breadths sum to 30.
> In phase 4, we need to grow the sum of the max breadths by 70 to accommodate item 2.  Two options are:
>         1. Grow each track's max breadth equally, and end up with max breadths = [45, 55].
>         2. Grow only the second track's max breadth, and end up with max breadths = [10, 90].
>
> By not considering the just-set max breadth as a constraint during space distribution (i.e. by treating it as infinity), we get the second result, which we considered a better result because the first track remains sized exactly to the first item.  In this example[1] which uses the IE10 syntax, each of the three elements (item 1, item 2, and the grid) is no bigger than it needs to be.
>
> Does that make sense?

It does!  Thanks for the example!

~TJ

Received on Friday, 21 March 2014 16:02:05 UTC