Re: [csswg-drafts] [css-grid][css-align] How items with synthesized baseline affect the size of intrinsic tracks

The problem is that the cyan box is allowed to grow into the new space cleared out below it by aligning to the baseline of the pink box.  If we can prevent that growth from happening, then the cyan's baseline will stay the same in both rounds, and the layout stabilizes in the second round.

Suggestion, then: when we do self-baseline-alignment, we add pretend-margin to *both* sides of the boxes, so that all the aligned boxes have *identical* margin-box sizes.

In this example, then, the first round would give the pink box 125px of top margin, and the cyan box 25px of bottom margin (so both have a margin-box height of 175px). Then, when we go into the second round, both boxes already exactly fit into the new 175px row height. The cyan box's synthesized baseline is still at 150px, so the pink box is already aligned with it, and layout is finished.  The yellow box still overflows the grid container by 25px, but otherwise things fit together nicely.

What this means is that, if there are larger items in the row, the cyan item will not resize to fit the row. And we haven't solved that there will be some overflow in this case even though it's theoretically not necessary.  But at least its size should be stabilized across cycles.

Thoughts?  We're not sure at the moment whether this is only needed for self-alignment, or whether it would apply to the pretend-padding of content alignment too.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1365#issuecomment-316805039 using your GitHub account

Received on Thursday, 20 July 2017 19:25:13 UTC