Product Card Grid

Build a product showcase page featuring a fixed-width card grid layout that maintains consistent column sizing across all viewport sizes.

Requirements

Create an HTML page with a grid of product cards where:

• The grid uses fixed column widths instead of fluid percentage-based widths
• Each product card spans exactly 3 columns
• The grid displays 4 cards per row on desktop (12 columns ÷ 3 columns per card = 4 cards)
• Cards should be vertically centered within their row
• The entire grid should be right-aligned within its container

Card Content

Each card should contain:

• A product image placeholder (200px × 200px)
• A product title
• A price tag
• An "Add to Cart" button

Test Cases

• The grid container uses fixed-width columns @test
• Each card spans exactly 3 columns @test
• The grid is right-aligned in its container @test
• Cards are vertically centered within their row @test

Implementation

@generates

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout system with fixed column width support.

Notes

The page should be a single HTML file that includes both structure and styling. Focus on implementing the grid layout correctly - the visual styling of cards themselves can be minimal.