Animate CSS Grid's Auto Height & Last Read Tag TipsAnimate CSS Grid's Auto Height & Last Read Tag Tips
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Kehinde's avatar
Kehinde Omopariola
pro
• Feb 10
[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
Interaction DesignTailwind CSSDesign Engineeringfrontenddeveloperdesign
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started