Responsive Grid with Custom Breakpoints

Overview

Build a responsive grid system for a web application that needs to adapt to specific device categories. The application targets three distinct viewport sizes with custom breakpoint thresholds that differ from standard Material Design defaults.

Requirements

Create a Sass-based grid stylesheet that:

1. Defines custom responsive breakpoints at the following thresholds:

   • Small screens: 0px - 767px
   • Medium screens: 768px - 1199px
   • Large screens: 1200px and above

2. Configures the grid to use these custom breakpoints instead of the Material Design defaults

3. Sets appropriate gutter spacing for each breakpoint:

   • Small: 12px gutters
   • Medium: 20px gutters
   • Large: 32px gutters

4. Generates the necessary CSS classes that work with the custom breakpoints

Deliverables

Provide a single Sass file (grid.scss) that imports and configures the layout grid package with the custom breakpoints and gutter specifications.

The file should:

• Import the layout grid package with configuration
• Include the layout grid CSS using @use "@material/layout-grid/mdc-layout-grid"
• Map the custom breakpoint thresholds to the appropriate device categories (phone, tablet, desktop)

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout functionality with configurable breakpoints.

Test Cases

Test 1: Custom Breakpoint Configuration { .test-case }

@test

Input: Compile the Sass file with the custom breakpoint configuration

Expected Behavior: The generated CSS should apply grid styles at the custom breakpoint thresholds (768px and 1200px) rather than the default Material Design breakpoints (600px and 840px)

Test 2: Custom Gutter Spacing { .test-case }

@test

Input: Compile the Sass file with custom gutter values

Expected Behavior: The generated CSS should use the specified gutter spacing values (12px, 20px, 32px) for the respective breakpoints