Product Card Gallery

Build a responsive product card gallery that displays items in a grid layout.

Requirements

Create an HTML page with a gallery that arranges product cards in a responsive grid:

• Use a three-layer container structure to create the grid layout
• Display at least 6 product cards with placeholder content (each card should be a simple div with text)
• Ensure the grid automatically adapts to different screen sizes (desktop, tablet, mobile)
• Apply responsive spacing between cards
• Center the grid content within the page

The solution should use only HTML and CSS classes - no JavaScript required.

Implementation

@generates

Test Cases

Basic Structure

• The gallery uses the correct three-layer grid structure @test
• Grid cells are properly nested within the grid inner wrapper @test

Responsive Behavior

• The grid automatically adjusts columns based on viewport size @test
• Margins and gutters are applied correctly at all breakpoints @test

Content Display

• Multiple product cards render within the grid structure @test
• Grid container centers content horizontally @test

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout system with Material Design specifications.