Last Baseline Item Alignment

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 108)
Intent stage: Prepare to ship

Summary

This feature allows developers to align items within either flex or grid layout by their last baseline, instead of their first. This is done via the following properties: align-items: last baseline; /* flex/grid container */ justify-items: last baseline; /* grid container */ align-self: last baseline; /* flex/grid item */ justify-self: last baseline; /* grid item */

Motivation

Currently in Blink we only support aligning grid/flex-items via. their first baseline. This feature allows web developers to align these items by their last baseline.

Standards & signals

Specification: https://drafts.csswg.org/css-align-3/#baseline-rules
Firefox: Shipped/Shipping — (note - relatively basic support)
Safari: Shipped/Shipping — "It's complicated". WebKit currently parses "align-items: last baseline" however doesn't support it currently in layout (for Stable versions of the browser). https://caniuse.com/?search=last%20baseline This is currently changing however with recent commits by WebKit implementing the "last baseline" behaviour. E.g. https://bugs.webkit.org/show_bug.cgi?id=245792
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=885175

View on chromestatus.com