All major browser engines now support last baseline alignment in CSS grid and flexbox.


![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />

> [!TIP]
> **Celebration:** This web feature is now available in all three major browser engines!


Alignment using the `first` and `last` keywords is now available in all major engines. This means that we can use last baseline alignment as another option when aligning groups of flex or grid items.

## First baseline alignment

If you set the value of `align-items` to `baseline`, the result will be first baseline alignment. Therefore the first baseline of the item you are aligning (described as the *alignment subject* ) will align with the first baseline of the other items in the group. You can see this in the following example, where the first two flex items are aligned using `align-items: baseline`, so they align along the baseline created by the larger text. The final item is aligned to `flex-start` and therefore aligns to the start of the flex container.
<iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/xxaGaqq?height=450&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen xxaGaqq by web-dot-dev on Codepen"></iframe>

## Last baseline alignment

When aligning a grid or flex item with the value `last baseline`, the last baseline of that item will align to the last baseline of the *baseline sharing group* that it is part of. The following example demonstrates last baseline alignment, with the first flex item aligning with the last line of text in the larger item. The final item in this group is aligned to `flex-end`, which is the end of the flex container.
<iframe allow="camera; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi;" loading="lazy" src="https://codepen.io/web-dot-dev/embed/ExejeWN?height=450&amp;theme-id=light&amp;default-tab=result&amp;editable=true" style="height: 100%; width: 100%; border: 0;" title="Pen ExejeWN by web-dot-dev on Codepen"></iframe>

## Fallback alignment

If the alignment subject does not have a baseline sharing group to align to, then a fallback alignment will be used. For `baseline`, and `first baseline` the fallback alignment is `start`, and for `last baseline` the fallback alignment is `end`.