Beautiful UI shouldn't require messy code. ✨ A while ago, I built this feature section for TipMi....

Beautiful UI shouldn't require messy code. ✨ A while ago, I built this feature section for TipMi....Beautiful UI shouldn't require messy code. ✨ A while ago, I built this feature section for TipMi....

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

Victor Olabisi

pro

• 10h

Beautiful UI shouldn't require messy code. ✨

A while ago, I built this feature section for TipMi. Looking at the varied card sizes, you might think it requires complex positioning or endless Flexbox containers. The secret weapon? CSS Grid with grid-template-areas.

Using Grid for this specific architecture is the easiest, most scalable approach. You get complete two-dimensional control, allowing you to span items across multiple columns and rows seamlessly while keeping the underlying HTML structure incredibly clean and readable.

Take a look at the live build here: https://tipmi-dev.vercel.app/

Completed work

cssgrid frontendtips reactjs Frontend Development Web Development CSS JavaScript React

Paul Fadayo

pro

• 10h

Great design 👍

Victor Olabisi

pro

• 10h

Thank You

Nugraha

• 8h

@Victor Olabisi Using grid-template-areas for the varied TipMi card sizes keeps the HTML readable. Did you add a separate area map for the mobile layout?

Victor Olabisi

pro

• 6h

For mobile I completely simplified it! Instead of keeping the desktop map, I just allowed the grid elements to stack vertically on top of each other. Much better for readability on phones @Nugraha

Eniola Adeleke

• 5h

Nice Layout 🔥

Victor Olabisi

pro

• 5h

Thank you @Eniola Adeleke

Anubhav Saxena

• 1d

Most grids like this just sit there. No motion, no feedback. Added hover states on every card. Quick, tuned by hand, not just a default transition. This is the level I build at now.

Muhammed Ahmed

• 1d

Turned a static UI into something that actually moves.

I designed and animated these mobile app screens in Jitter, focusing on smooth transitions, micro-interactions, and making the product feel more alive without overdoing it.

Because good UI shouldn’t just look good it should move good too. 😏

Jitter Contra Figma UI Design Animation Motion Design

Nugraha

• 15h

@Muhammed Ahmed The restrained micro-interactions keep the mobile screens feeling responsive without distracting from the UI. How did you decide on the transition timing in Jitter?