or run

tessl search
Log in

Version

Files

evals

scenario-10

rubric.jsontask.md
tile.json

task.mdevals/scenario-10/

Responsive Product Grid

Build a responsive product showcase grid that adapts to different screen sizes following modern design principles.

Capabilities

Responsive Layout Adaptation

Create a product grid that displays:

  • 3 products per row on desktop screens (≥840px width)
  • 2 products per row on tablet screens (600-839px width)
  • 1 product per row on phone screens (<600px width)

Each product card should contain a colored box representing the product.

Test Cases

  • Desktop layout (900px viewport): displays 6 product cards in 2 rows of 3 cards each @test
  • Tablet layout (700px viewport): displays 6 product cards in 3 rows of 2 cards each @test
  • Phone layout (400px viewport): displays 6 product cards in 6 rows of 1 card each @test

Implementation

@generates

API

The implementation should be a single HTML file that includes:

  • Proper HTML5 structure with DOCTYPE, html, head, and body tags
  • A grid containing exactly 6 product cards
  • Each card should be a div with class "product-card" containing a colored div (use any background colors)
  • Cards should have min-height of 150px for visibility
  • The grid must automatically reflow at the specified breakpoints without JavaScript
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Product Grid</title>
  <!-- Include CSS dependencies and styles -->
</head>
<body>
  <!-- Grid structure with 6 product cards -->
</body>
</html>

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout system with device-specific breakpoints and column spanning capabilities.

@satisfied-by