16-Column Grid System

Build a custom responsive grid system using a 16-column layout for desktop, 12-column for tablet, and 6-column for phone breakpoints.

Requirements

Your task is to configure a Material Design grid system with custom column counts that deviate from the default 12/8/4 column structure. The grid should support:

1. Custom Column Configuration: Desktop devices should use 16 columns, tablet devices should use 12 columns, and phone devices should use 6 columns
2. Responsive Layout: Create a layout with cells that span different numbers of columns at each breakpoint to demonstrate the custom column system
3. Proper Styling: Include the necessary Sass configuration and generate the CSS grid classes

The solution should demonstrate that the grid system correctly adapts to the custom column counts at each breakpoint.

Test Cases

• A cell with span-8 class spans 8 columns on desktop (50% width in 16-column grid) @test
• A cell with span-6 class spans 6 columns on tablet (50% width in 12-column grid) @test
• A cell with span-3 class spans 3 columns on phone (50% width in 6-column grid) @test
• Grid inner container generates 16 columns on desktop viewport @test

Implementation

@generates

API

// Configure and import the Material layout grid with custom column counts
@use "@material/layout-grid" with (
  $columns: /* custom column map */
);

// Include the grid styles
@use "@material/layout-grid/mdc-layout-grid";

Dependencies { .dependencies }

@material/layout-grid { .dependency }

Provides responsive grid layout system with configurable column counts.

@satisfied-by