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+.

Requirements

Render a card-grid container and one card element per provided card object.
Each card must include card-title and card-body elements.
Cards must be created from the provided cards data; hardcoded cards are not sufficient.
Use CSS Grid or Flexbox with a visible gap between cards.
Each card must have padding, a border, and border-radius.
Layout must be 1 column below 600px, 2 columns from 600px through 899px, and 3 columns at 900px and above.

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

Related Practice

Track

Frontend Fundamentals

Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.

Console output will appear here...