Back to portfolio

Responsive Product Grid

Nuxt 4 · Vue 3 · TailwindCSS

Context

This project demonstrates responsive layout engineering and theme system implementation within a realistic UI component. The goal was to build a stable product grid with light/dark mode support and predictable behaviour across all screen sizes. See below

responsive product grid demonstration

Goal

  • Implement adaptive grid layout (1–5 columns)
  • Maintain consistent 4:5 image ratio
  • Prevent layout shift
  • Support light/dark theme
  • Keep clean and scalable component structure

Key Decisions

Grid-first approach

CSS Grid with controlled max-width container prevents ultra-wide stretching and preserves readability.

Stable image rendering

Fixed 4:5 aspect ratio with object-fit: cover ensures visual consistency regardless of content variations.

Resilience to imperfect data

Line clamping, optional badges, and image fallback handling keep layout stable under real-world conditions.

Theme system

Light and dark modes implemented via Tailwind theme configuration without duplicating components.

Implementation Highlights

  • Nuxt 4 with Composition API
  • Reusable ProductCard component
  • Lazy-loaded images
  • Hover interactions without layout shift
  • Visual feedback for “Add to cart” interaction

Outcome

The result is a predictable, scalable UI system ready for API integration. The layout remains stable across five breakpoints and maintains visual consistency in both light and dark themes.

back to the case details

Product Catalogue

Hydrating Creme
Photo by Nataliya Melnychuk on Unsplash

Hydrating Creme

Hydrating daily face cream with lightweight texture and a silky finish. Absorbs quickly without leaving a greasy layer, helps maintain skin elasticity, and gives a fresh, well-rested look throughout the day. Suitable for normal to combination skin and works well under makeup.

€12.99€11.99
Bestseller
Wireless Headphones
Photo by C D-X on Unsplash

Wireless Headphones

Minimalist wireless headphones with clear sound and comfortable ear cushions. Perfect for work and travel.

€89.00€99.00
Sale
Limited
Sun Di Gioia Perfume
Photo by Karly Jones on Unsplash

Sun Di Gioia Perfume

A warm and sunny fragrance with soft floral notes. Ideal for everyday wear and special moments.

€64.50€59.90
New
Specialty Coffee Beans
Photo by Battlecreek Coffee Roasters on Unsplash

Specialty Coffee Beans

Freshly roasted coffee beans with a rich aroma and smooth taste. Perfect for espresso lovers.

€14.90€16.50
Premium
Wooden Bar Stool
Photo by Ruslan Bardash on Unsplash

Wooden Bar Stool

Elegant wooden bar stool with a natural finish. Fits perfectly into modern and classic interiors.

€129.00
Sale
Pro
Studio Headphones
Photo by Kiran CK on Unsplash

Studio Headphones

Professional over-ear headphones with deep bass and precise sound. Designed for long listening sessions.

€149.00€139.00
Eco
Organic Hair Spray
Photo by Mitzie Organics on Unsplash

Organic Hair Spray

Lightweight organic hair spray that keeps your style natural and flexible without stiffness.

€18.50
New
Leather Backpack
Photo by Jakob Owens on Unsplash

Leather Backpack

Stylish leather backpack with enough space for everyday essentials. Durable and timeless design.

€179.00€199.00
Sale
Floral Heels
Photo by Mohammad Metri on Unsplash

Floral Heels

Elegant floral heels with a comfortable fit. A perfect accent for summer outfits and events.

€74.00€69.00