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

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?

Peter

[1] http://jsfiddle.net/84Pz9/

Received on Friday, 21 March 2014 01:53:37 UTC