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/

Great design 👍

Sharing a free component: Product Grid Controller 🎛️

I kept seeing this "click to change grid columns" interaction in premium templates and couldn't find a free version anywhere. The plugin that had it was paywalled, so I built my own from the ground up as a proper reusable code component.

What it does: — Lets visitors switch your product/collection grid between 1–4 columns on click — Comes with a choice of animation styles: smooth position-based reflow, fade, or fade+slide — Fully reusable: point it at your own grid via its exact element ID, no hardcoded assumptions about your project's structure — Doesn't touch your styling — colors, typography, layout stay entirely yours, it only ever manages the column logic

Worth mentioning: it went through two rounds of Community review before landing here. Both times the feedback was about scoping — making sure the component could only ever affect the exact element you point it at, nothing broader on the page. Genuinely made it a better, safer component, and I'd rather ship it right than ship it fast.

Free for the next 7 days, then it becomes a paid component. Would love feedback if you try it, and happy to answer questions about how it works under the hood. Link Below 👇👇