Skip to main content
Problem 11

Responsive Card Grid

EASYBUILD
CSS & Layout+2

Given an array of card objects cards (each with title and body), build a responsive card grid. Render a data-testid="card-grid" container. For each card, render a data-testid="card" element containing data-testid="card-title" and data-testid="card-body". Cards must be created from JavaScript — hardcoding in HTML is not sufficient. Use CSS Grid or Flexbox with a gap, and each card must have padding, a border, and border-radius. Layout: 1 column below 600px, 2 columns 600–899px, 3 columns 900px+.

Examples
Example 1
Input
cards = [{"title": "Alpha", "body": "First"}, {"title": "Beta", "body": "Second"}, {"title": "Gamma", "body": "Third"}]
Output
A 3-column grid on desktop with three cards, each showing title and body text.
Constraints
  • Cards must be created dynamically from the data array
  • Each card must have visible padding, border, and border-radius
Follow-up

Can you add a hover effect that slightly lifts the card (translateY + box-shadow) with a smooth CSS transition?

Hints
Console output will appear here...