abc <div style="display: inline-grid; border: solid; grid-template-columns: auto auto">
  <small style="align-self: baseline;">baseline</small>
  <big style="font-size: 20px; align-self: baseline; margin-top: auto">baseline</big>
</div>

has baseline alignment in Firefox but not in Chromium.

has baseline alignment in Firefox but not in Chromium.

This behaviour seems potentially like a bug in FF - e.g. https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=8887 leaves some space above the first item when there shouldn't be any.

CC @MatsPalmgren

@bfgeek

You're right that this was unspecified - quite a bit of margin interactions were, as we found out while digging into this! We committed the following fixes:

• Made the definition of auto margins for grid items normative, and tightened it up in 16ed028.
• Defined that overflowing items with auto margins safe-align, just as they do in Flexbox, in 7b78f0d.
• Defined more completely how baseline self-alignment and content alignment work in 965a5af (filed separately as [css-align-3] mixing baseline self-alignment and content alignment #6389).
• Committed a proposed fix for this issue in c78e58b).

That final proposed fix (c78e58b) specifies that auto margins only disable baseline content-alignment if they conflict with its baseline preference, identically to how self-alignment was already specified to work. (I.e. start-aligning a box, whether with margins or alignment properties, is compatible with first-baseline alignment; and end-aligning the box is compatible with last-baseline alignment.)

This doesn't quite match current implementations, but we think it makes the most sense, since auto margins and self-alignment are, in practice, identical for authors. However, we're okay with just fully disabling baseline content-alignment in the presence of auto margins if necessary. What do people think? (Agenda+ to ask more broadly.)

Hi, sorry for the late reply. I'm not sure I understand what's the final proposal for this issue, since there are a lot of changes in the spec and not all of them are related to auto-margin alignment. In the last comment from @tabatkins it was mentioned:

that auto margins only disable baseline content-alignment if they conflict with its baseline preference, identically to how self-alignment was already specified to work.

In the last draft (16ed028) it's stated clearly that the use of auto-margins in on axis disables the the self-alignment properties in such axis. Hence, it's clear that such item can't participate in baseline alignment, since it's align-self/justify-self values must be ignored. I think it's a bit confusing or redundant that in c78e58b we use auto-margins as a limit for the grid item's participation in baseline (the root cause is that aligng-self/justify-self are ignored) and even there seems to be scenarios (if I've understood it correctly) where even with auto-margins the grid item may participate in baseline alignment (it's impossible since align-self/justify-seld must be ignored).

I've always assumed that the use of auto-margins in one axis would imply ignoring at all the value of the self-alignment properties operating on such axis. In the last published spec this was specified as:

https://www.w3.org/TR/css-grid-1/#auto-margins

auto margins absorb positive free space prior to alignment via the box alignment properties.

That's what motivated the initial implementation of the Alignment logic in both, Chrome and Safari.

Now that I read it again, the spec states "disabling the effects", not "disabling the properties"; given this subtle difference, I guess it makes sense to clarify explicitly in the Self Baseline Alignment section that items with auto-margins won't participate in baseline-alignment, despite either justify-self or align-self may have 'baseline' as value.

My only doubt so far is whether these changes introduce any behavior change regarding how auto-margins affects to the Self Alignment features. My understanding is that there is no effect of these properties, independently of their value (including baseline), when items use 'auto' margins.

The CSS Working Group just discussed baseline-alignment and auto margins, and agreed to the following:

• RESOLVED: alignment via auto margins disables content baseline-alignment the same way as align-self values with the same effect

@javifernandez I think you're mixing up self-alignment and content-alignment. Self-alignment is definitely disabled in the presence of auto margins, but our question was about baseline content-alignment.

Yeah, I've read the log of the CSS WG meeting Sorry about the confusion. I'm satisfied with the resolution.