Professional Product Grid

Smart product images matched automatically to product titles

Grid Columns:

🖼️

Smart Images

Images auto-match product titles using AI

📐

Consistent Sizing

All images maintain 4:3 aspect ratio

✨

Hover Effects

Smooth 1.05x zoom on hover

📱

Responsive

Works perfectly on all devices

Products

Showing 0 products

Sort By:

Technical Implementation

Image Matching

✓ Keyword extraction from product titles
✓ Category-based fallback images
✓ 100+ product keywords mapped
✓ Smart normalization of category names
✓ Handles compound names (e.g., "Textiles & Apparel")

CSS Optimization

✓ object-fit: cover (no stretching)
✓ Fixed height: 250px (consistent cards)
✓ Aspect ratio 4:3 (professional look)
✓ transform: scale(1.05) on hover
✓ Responsive grid: 1/2/3/4/5 columns

Image Container CSS

<div className="w-full h-[250px] overflow-hidden">
  <img
    src={imageUrl}
    className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
    alt="product"
  />
</div>

Product Card Structure

<div className="bg-white rounded-lg border border-gray-200 flex flex-col h-full">
  {/* Fixed height image section */}
  <div className="w-full h-[250px] overflow-hidden">
    <ProductImage title={name} category={category} />
  </div>

  {/* Content section */}
  <div className="flex-1 flex flex-col p-4">
    {/* Product info */}
  </div>
</div>

Responsive Grid

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  {products.map(product => (
    <ProductCardPro key={product._id} {...product} />
  ))}
</div>

Professional product grid UI for SrotIndia Marketplace

All images automatically matched to product titles