Build this UI: product grid
A responsive grid of product cards with images, prices and a hover effect.
intermediateHTML & CSS
The task
Style the product grid to match the demo:
- As many cards per row as fit, each at least 160px wide (Grid
auto-fill+minmax). - The "image" is a square coloured box (
aspect-ratio). - Name, then price in bold; the "Sale" badge sits on top of the image corner.
- On hover a card lifts slightly with a shadow (smooth transition).
What you'll build
The finished result. Try it out, then build it yourself below.
Demo · drag the bottom edge to make it taller