[csswg-drafts] [css-grid] Add baseline alignment as one of the examples for the 2nd pass of the algorithm

mrego has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Add baseline alignment as one of the examples for the 2nd pass of the algorithm ==
The [track sizing algorithm](https://drafts.csswg.org/css-grid/#algo-overview) has the following note:
> This cycle is necessary for cases where the inline size of a grid item depends on the block size of its grid area. Examples include wrapped column flex containers (flex-flow: column wrap), orthogonal flows (writing-mode), and multi-column elements.

The list is just some examples, and it doesn't aim to be exhaustive, however we believe it'd be nice to add one more example in the list.

The case is the baseline alignment, for example:
```html
<div style="display: grid; align-items: baseline; border: solid thick;">
  <div style="background: magenta;">Item1<br>Several<br>Lines</div>
  <div style="background: cyan; font-size: 2em; grid-column: 2;">Item2</div>
  <div style="background: yellow; grid-column: 1 / 3;">Item3</div>
</div>
```

![Baseline alignment example that modifies the size of the first row](https://cloud.githubusercontent.com/assets/11602/25948470/d3233cb4-3653-11e7-8e82-2b638e45a42c.png)

In this case the first item (magenta) is moved down due to baseline alignment, so its [min-content contribution changes](https://drafts.csswg.org/css-align/#baseline-align-self).
This cause that we need to do a new pass of the algorithm to compute the size of the rows again.

Could you add this specific case to the list of examples? Thanks!


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1350 using your GitHub account

Received on Thursday, 11 May 2017 12:14:35 UTC