DEV Community

JAMES VINCH
JAMES VINCH

Posted on

When building a web app that showcases apparel, one of the trickiest parts is creating a smooth, responsive product grid

#webdev #css #tutorial #frontend

You want the images to look crisp, the layout to adapt to any screen, and the user to feel like they’re browsing a real store, not a clunky spreadsheet.

Let me walk you through a simple approach using CSS Grid and a few modern tricks. This is perfect for a category page, like a collection of polo shirts, where you want to highlight fit, fabric, and color without distraction.

First, set up your HTML structure. Each product card should be a semantic article with a link, an image, and a short description.

<article class="product-card">
  <a href="/product/classic-pique-polo">
    <img src="polo-blue.jpg" alt="Classic Pique Polo in Navy" loading="lazy">
    <h3>Classic Pique Polo</h3>
    <p>Breathable cotton, tailored fit</p>
    <span class="price">$45</span>
  </a>
</article>
Enter fullscreen mode Exit fullscreen mode

Now for the CSS. We want a responsive grid that works on mobile, tablet, and desktop. Use grid-template-columns with auto-fill and minmax to let the browser decide how many columns fit.

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

To keep images uniform, use the aspect-ratio property. This prevents layout shift and ensures every polo photo looks professional.

.product-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

For a subtle hover effect, I like using a gentle scale and shadow transition. It makes the browsing experience feel interactive without being distracting.

.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
Enter fullscreen mode Exit fullscreen mode

Finally, ensure the text remains crisp. Use clamp() for responsive font sizes.

.product-card h3 {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  margin: 12px 0 4px;
}
Enter fullscreen mode Exit fullscreen mode

That’s it. You now have a clean, fast, and delightful product grid that works perfectly for a modern polo shirt collection. Whether you’re showcasing pique cotton or stretch blends, this layout keeps the focus on the product. Happy coding.

Top comments (3)

Collapse
 
davitparkltd profile image
Davit Park •

Interesting perspective! I've always found that the right polo can definitely make a difference in how approachable yet professional you come across. Do you have any tips for choosing colors that work best for tech events vs. more formal client meetings?

Collapse
 
rock-randy profile image
Rock •

Interesting take. For me, the fabric's breathability is key when I'm presenting in a warm room—nothing worse than feeling sweaty under the lights. Do you find the polos hold up well after multiple washes without losing that modern fit?

Collapse
 
tom_hanks profile image
Tom Hanks •

Great point about breathable fabrics—nothing worse than sweating through a client meeting. Do you find that lighter colors work just as well for a polished look, or do you stick to darker tones?