Product cards that don't drift

On a distribution site we shipped this quarter for a Toronto beauty equipment supplier, the product grid was the last thing to feel right. The images were sharp, the type set well, the copy sat in the correct hierarchy. The grid still looked wrong.

The problem was drift. One card's product name was a single word. Another was two lines with a hyphenated compound. A third had a short eyebrow label, the next one had a longer eyebrow that wanted to run to two lines. The result was rows that stepped up and down by a few pixels each, and cards that never quite sat in a rhythm.

What we changed

Three habits we now reach for on every product card:

1. Lock the image container to fixed pixel dimensions and use object-cover inside. No aspect-ratio shenanigans, no auto-heights that depend on the image itself. Every card image is the same pixel size in the layout, no matter what the source aspect is.
2. Reserve minimum heights for label rows using min-h-* plus line-clamp-*. The eyebrow label reserves two lines even when the current content is one. The name reserves two lines. The tagline reserves three. The card never gets shorter when the copy is shorter.
3. Skip the JavaScript hover choreography on the card itself. A group-hover CSS zoom on the image and a subtle border-colour shift on the container reads plenty considered. When you add framer-motion whileHover on top of native browser hover, the animation lags on the frame you touch first and looks off.

Why it matters

Row alignment is one of those things nobody praises when it is right and everybody notices when it is wrong. On a product page it registers as trust: the shop looks like the shopkeeper cares about the details, so the product probably was cared about too. On a services page or a case study grid, it is the difference between the site reading like a portfolio and reading like a template.

Grid drift is a small thing, and small things compound. Pin the dimensions early, before the client content lands, and let the copy fall into a frame that was already the right size for it.