[css-align][css-grid][css-flex] Baseline alignment not implemented due to lack of specs

[FremyCompany]

I started the baseline review, but I’m wondering why flexbox and grids rows are said to have baselines, and how those baselines should work.
As far as I know, you cannot baseline-align stuff in a grid or in a flexbox, there is just no part of the algorithm that keep track of those things. What are your expectations here?

I have no idea why you think this, as grid and flex items all have an align-self: baseline value.

Flexbox does have some text talking about baseline support, indeed:
http://www.w3.org/TR/css-flexbox-1/#cross-sizing

However, it seems the Microsoft implementation of grids didn't have a similar baseline-align value and, correct me if I'm wrong, the current Blink implementation doesn't support the value either. Supporting the value would, as far as I understand, require significant changes to the track-sizing algorithms to keep track on these above/below the baseline measurements, like we do in css-tables.

I am therefore not sure the baseline section that was added to the spec "compiles" right now:
https://drafts.csswg.org/css-grid/#grid-baselines

I think the topic should be brought to discussion in the working group. We should either clarify that grid does not support baseline-alignment (ignores the value) or that it does, and reflect that in the algorithms. I am not sure this is something our team is willing to put in the Level 1 version of the spec, though. I personally never understood why you would want to baseline-align things in a table, but I guess some people use it for some reason.

[tabatkins]

No, I'm pretty sure Grid already handles this fine. Over in Align, baseline alignment is defined as:

effectively increases the margins on the box to align its alignment baseline with other baseline-aligned boxes in its group.

(or padding, for content alignment)

And then Grid just operates on min/max-content contributions, which include the margins of the element.

We think there is something missing - spanning elements need to first/last-baseline align with the stuff in its first/last row or column, but that's just a clarification to how grid items collect into baseline-sharing groups.

[tabatkins]

Wait, never mind, Align already says that:

If a box spans multiple shared alignment contexts, it participates in first (last) baseline self-alignment within its start-most (end-most) shared alignment context along that axis.

[FremyCompany]

I am still confused about what things should be doing. Let's take align-content:baseline, what is it supposed to do, and how?

Since the specs doesn't define algorithms but just intents, it would be good to have more examples ;-)

[tabatkins]

Baseline content-alignment only works between things in "row-like contexts" https://drafts.csswg.org/css-align/#baseline-align-content - table cells, flex items, and grid items. Inline-level boxes (such as an inline-grid container) are not on that list, so they don't participate in baseline content-alignment. (We can clarify the spec a bit here.)

So you can content-align the grid items in the container with each other (they'll get magic-padding to make their baselines align), but the grid container itself can't be baseline content-aligned in this context. (Only thing you can do is use vertical-align.)

[FremyCompany]

Are there contexts in which you should be able to baseline-align a grid container? If the grid is inside a flexbox, for instance, how would align-content work in this case? Adding a padding-top to the grid?

[fantasai]

Yes, exactly. (Well, conceptually. The computed/used value of padding-top does not change.)

[fantasai]

92cbf50 clarifies that boxes not in a shared alignment context do not baseline-align; they use the fallback alignment (start/end depending on first/last baseline).

Let me know if you need any further clarifications.

[FremyCompany]

Thanks, I think things are clear again; let's close for now and I'll reopen if we can come up with another question.

[FremyCompany]

Just no to loose the image: