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

From: Peter Salas <psalas@microsoft.com>
Date: Fri, 21 Mar 2014 01:53:05 +0000
To: Tab Atkins Jr. <jackalmage@gmail.com>, www-style list <www-style@w3.org>
Message-ID: <465aa5c8e86645499f86d22ed7672cfc@BL2PR03MB241.namprd03.prod.outlook.com>
```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?

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:

track 2:

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:20 UTC