DEV Community

Rock
Rock

Posted on

Build a Responsive Product Card Grid with HTML, CSS Grid, and Vanilla JavaScript

So you want to build a web app that looks sharp and feels great to wear—kind of like a perfectly fitted polo shirt. Let’s be real: your users judge your app in milliseconds. If the layout feels flimsy or the interactions lag, they’re gone. I’ve been there. After years of wrestling with CSS, I found a pattern that changed everything: a responsive card grid using CSS Grid and a tiny bit of vanilla JavaScript for interactivity. No frameworks, no bloat. Just clean, modern code.

Let me show you how to build a product card section that mirrors the elegance of a premium men’s polo shirt collection. You’ll learn how to handle responsive images, hover states, and smooth transitions—all without a single library.

First, the HTML structure. We’ll create a container with a class of polo-grid. Each card will have an image, a title, a short description, and a subtle call-to-action button.


<div class="polo-grid">
  <div class="card">
    <img src="https://via.placeholder.com/300x400" alt="Classic Fit Polo" loading="lazy">
    <h3>Classic Fit Polo</h3>
    <p>Breathable pique cotton, tailored collar, perfect for smart casual.</p>
    <button aria-label="View details">Explore</button>
  </div>
  <!-- Repeat for other cards -->
</div>
Enter fullscreen mode Exit fullscreen mode

Now the magic—CSS Grid. This gives us a responsive layout without media queries. Use auto-fit and minmax to let the browser decide the columns.

.polo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.card h3 {
  font-size: 1.25rem;
  margin: 1rem 1rem 0.5rem;
}

.card p {
  margin: 0 1rem 1rem;
  color: #555;
}

.card button {
  margin: 0 1rem 1rem;
  padding: 0.5rem 1.5rem;
  background: #2d2d2d;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.card button:hover {
  background: #444;
}
Enter fullscreen mode Exit fullscreen mode

Notice the object-fit: cover—that’s the secret to keeping images uniform, just like how every polo shirt in a collection should have a consistent fit. The hover effect adds a subtle lift, giving your app a tactile, premium feel.

But wait—what if you want to add a quick “like” interaction? Here’s a tiny snippet of vanilla JavaScript that toggles a favorite state. No jQuery needed.

document.querySelectorAll('.card button').forEach(btn => {
  btn.addEventListener('click', function(e) {
    this.textContent = this.textContent === 'Explore' ? '✓ Saved' : 'Explore';
    this.style.background = this.textContent === '✓ Saved' ? '#007bff' : '#2d2d2d';
  });
});
Enter fullscreen mode Exit fullscreen mode

And there you have it. A polished, responsive product grid that loads fast, looks great on any screen, and feels as comfortable as a well-worn polo. The best part? It’s just HTML, CSS, and a sprinkle of JS—no heavy dependencies. Your users will thank you, and your app will stand out from the crowd.

Top comments (2)

Collapse
 
frishay_ltd_a1987ef83aa1f profile image
Amelia •

Great point! I've found that simplicity often gets overlooked in favor of complexity, but your example highlights why keeping things minimal can be so powerful. Any tips for resisting the urge to over-engineer?

Collapse
 
frishay_ltd_a1987ef83aa1f profile image
Amelia •

Interesting perspective, though the post seems empty—maybe it's a placeholder? I'd love to hear the actual thought behind it.