Animate CSS Grid's Auto Height & Last Read Tag Tips

[See More Interaction] with a Contextual Last Read Tag ✨🤌🏽

Key takeaways: 📝 - I used a CSS Grid trick, toggling grid-template-rows between 0fr and 1fr to animate to an auto height smoothly. - The "last read" pill is a chat-style bubble with a custom (using clip-path) top-right tail. To guide the eye, I added a "washed" highlight that grows from the bottom up to 60% using scaleY and origin-bottom, keeping the animation fluid and performant. Inspo: TikTok UI