Material Components Layout Grid

Material Design's responsive grid system implemented as a CSS-only layout component. Provides a column-variate grid layout with 12 columns on desktop, 8 columns on tablet, and 4 columns on phone, following Material Design principles.

Package Information

• Package Name: @material/layout-grid
• Package Type: npm
• Language: SCSS/CSS
• Installation: npm install @material/layout-grid

Core Imports

@use "@material/layout-grid";

Import complete CSS classes:

@use "@material/layout-grid/mdc-layout-grid";

Import mixins and variables separately:

@use "@material/layout-grid" as grid;

Basic Usage

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
      Content for 4 columns
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
      Content for 4 columns
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
      Content for 4 columns
    </div>
  </div>
</div>

@use "@material/layout-grid/mdc-layout-grid";

Architecture

The layout grid system consists of three core components:

• Grid Container (mdc-layout-grid): The main wrapper that defines grid margins and maximum width
• Grid Inner (mdc-layout-grid__inner): The flex/grid container that manages cell layout and gutters
• Grid Cells (mdc-layout-grid__cell): Individual content areas that can span multiple columns

The system uses responsive breakpoints:

• Desktop: 840px+, 12 columns, 24px margins/gutters
• Tablet: 600px-839px, 8 columns, 16px margins/gutters
• Phone: 0px-599px, 4 columns, 16px margins/gutters

Capabilities

Grid Structure Classes

Core CSS classes for implementing the responsive grid layout.

.mdc-layout-grid             // Main grid container
.mdc-layout-grid__inner      // Inner grid wrapper
.mdc-layout-grid__cell       // Basic grid cell

Grid Structure Classes

Cell Spanning and Layout

Classes for controlling cell width across different screen sizes.

.mdc-layout-grid__cell--span-{1-12}                    // Span classes
.mdc-layout-grid__cell--span-{1-12}-{desktop|tablet|phone}  // Device-specific spans

Cell Spanning and Layout

Cell Alignment and Ordering

Classes for controlling cell vertical alignment and visual order.

.mdc-layout-grid__cell--align-{top|middle|bottom}  // Vertical alignment
.mdc-layout-grid__cell--order-{1-12}               // Visual ordering

Cell Alignment and Ordering

Grid Modifiers

Modifier classes for customizing grid behavior and alignment.

.mdc-layout-grid--fixed-column-width  // Fixed width columns
.mdc-layout-grid--align-{left|right}  // Grid alignment

Grid Modifiers

Sass Mixins

Programmatic mixins for custom grid implementations.

@mixin layout-grid($size, $margin, $max-width: null);
@mixin inner($size, $margin, $gutter);
@mixin cell($size, $default-span, $gutter);

Sass Mixins

Sass Variables and Customization

Configuration variables and CSS custom properties for theming.

$breakpoints     // Responsive breakpoints map
$columns         // Column counts per device
$default-margin  // Default margin values
$default-gutter  // Default gutter values

Sass Variables and Customization