Skip to main content
ELYTE
EasyFrontendBuild

Responsive Card Grid

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

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptCSS & LayoutResponsive DesignDOM Manipulation

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.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 1500ms judge budget.
  • Requires test IDs: app, card-grid.
  • Checks repeated UI regions: card, card-title, card-body.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Cards Rendered From Data.

Constraints

  • Cards must be created dynamically from the data array
  • Each card must have visible padding, border, and border-radius

Example behavior

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.

Follow-up

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