Dynamic Grid Theme Switcher

Build a web page with a responsive grid layout that allows users to switch between different spacing themes at runtime.

Requirements

Create a single-page application with the following features:

1. Grid Layout: Display a grid with 6 content cards arranged in a 3-column layout on desktop, 2-column on tablet, and single column on phone
2. Theme Switcher: Provide three theme options that users can toggle between:
   • Compact Theme: Tighter spacing with smaller margins and gutters
   • Default Theme: Standard Material Design spacing
   • Spacious Theme: Looser spacing with larger margins and gutters
3. Theme Controls: Include radio buttons or a dropdown to switch between themes
4. Visual Feedback: Each card should display placeholder content (e.g., "Card 1", "Card 2", etc.) with some padding and a border or background color to make spacing changes visible

Implementation Details

• Create an HTML file (index.html) with the grid structure and theme controls
• Create a CSS file (styles.css) that defines the theme variations
• The theme switching should work by applying different CSS classes to the grid container
• Each card should span 4 columns on desktop, 4 columns on tablet (resulting in 2 per row), and 4 columns on phone (full width)
• Cards should have visible styling (border, background, padding) to clearly show spacing adjustments

Test Cases

• When "Compact Theme" is selected, the grid displays with reduced spacing between cards and smaller margins @test
• When "Default Theme" is selected, the grid displays with standard Material Design spacing @test
• When "Spacious Theme" is selected, the grid displays with increased spacing between cards and larger margins @test
• The grid layout adapts responsively across all themes when the viewport is resized @test

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides the responsive grid system for layout structure.

@satisfied-by

@generates