or run

tessl search
Log in

Version

Files

evals

scenario-9

rubric.jsontask.md
tile.json

task.mdevals/scenario-9/

Responsive Product Layout Grid

Build a responsive product showcase page that displays items in a grid layout that adapts to different device sizes.

Requirements

Create an HTML page with a grid-based layout system that meets the following specifications:

Grid Structure

Create a centered grid container that houses product cards. The layout should have a three-layer structure:

  • An outer container that centers the grid and applies margins
  • An inner wrapper that manages column structure and spacing
  • Individual cells for each product card

Product Cards

Display 6 product cards in the grid with the following responsive behavior:

Desktop layout (viewport ≥840px):

  • Display 3 cards per row (each card spans 4 columns)
  • Use 24px spacing between cards and 24px outer margins

Tablet layout (viewport 600-839px):

  • Display 2 cards per row (each card spans 4 columns)
  • Use 16px spacing between cards and 16px outer margins

Phone layout (viewport <600px):

  • Display 1 card per row (each card spans full width)
  • Use 16px spacing and 16px outer margins

Featured Product

The first product card should be a featured item with special sizing:

  • On desktop: spans 8 columns (twice the width of regular cards)
  • On tablet: spans 4 columns (half the available width)
  • On phone: spans full width (same as other cards)

Testing

Implement visual tests that verify:

  • The grid container centers properly in its parent @test
  • Regular product cards span 4 columns on all devices @test
  • The featured card spans 8 columns on desktop, 4 on tablet, and full width on phone @test
  • The layout correctly adapts at the 840px and 600px breakpoints @test

Implementation

@generates

API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Showcase</title>
  <!-- CSS imports here -->
</head>
<body>
  <!-- Grid structure with product cards -->
</body>
</html>

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout with column-based positioning and device-specific spanning.

@satisfied-by