Skip to content

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

@mrego

Description

@mrego

The track sizing algorithm 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:

<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

In this case the first item (magenta) is moved down due to baseline alignment, so its min-content contribution changes.
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!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions