Custom Grid Spacing System

Build a customized responsive grid system with specific spacing requirements that differ from the default Material Design values.

Requirements

You need to create a Sass stylesheet that customizes a responsive grid layout with the following specifications:

Spacing Requirements

Configure the grid with these exact spacing values:

Desktop (≥840px):

• Outer margins: 32px
• Gutter spacing between cells: 32px

Tablet (600-839px):

• Outer margins: 24px
• Gutter spacing between cells: 20px

Phone (<600px):

• Outer margins: 16px
• Gutter spacing between cells: 12px

Layout Constraints

• Set a maximum grid width of 1280px
• Use the default 12-column layout for desktop
• Use the default 8-column layout for tablet
• Use the default 4-column layout for phone

Implementation

Create a file named custom-grid.scss that:

1. Imports and configures the grid system with the specified spacing values
2. Makes the grid styles available for use in HTML

The output should be a valid Sass file that can be compiled to CSS.

Test Cases

Test 1: Desktop Gutter Spacing @test

When compiled, the resulting CSS should include desktop gutter spacing of 32px between grid cells.

Test 2: Tablet Margin Configuration @test

When compiled, the resulting CSS should include tablet outer margins of 24px.

Test 3: Phone Gutter Spacing @test

When compiled, the resulting CSS should include phone gutter spacing of 12px between grid cells.

Test 4: Maximum Width Constraint @test

When compiled, the resulting CSS should limit the grid container to a maximum width of 1280px.

Implementation

@generates

API

// Custom grid configuration that outputs configured grid CSS
@use "@material/layout-grid";

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides the responsive grid system with configurable spacing.