Grid Structure Classes

Core CSS classes that form the foundation of the Material Components layout grid system.

Grid Container

The main grid wrapper that provides margins and sets the maximum width.

.mdc-layout-grid {
  /* Responsive margins and max-width */
}

Usage:

<div class="mdc-layout-grid">
  <!-- Grid content -->
</div>

Behavior:

• Applies responsive margins based on screen size
• Centers the grid horizontally
• Sets maximum width constraints
• Uses CSS custom properties for runtime customization

Grid Inner Wrapper

The inner container that manages the flexbox/grid layout for cells.

.mdc-layout-grid__inner {
  /* Flexbox layout with responsive gutters */
}

Usage:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <!-- Grid cells go here -->
  </div>
</div>

Behavior:

• Uses flexbox layout with fallback to CSS Grid where supported
• Manages gutters between cells
• Allows cells to wrap to new rows
• Stretches cells to equal height by default

Basic Grid Cell

The fundamental building block for grid content areas.

.mdc-layout-grid__cell {
  /* Default 4-column span with responsive behavior */
}

Usage:

<div class="mdc-layout-grid__cell">
  Content goes here
</div>

Behavior:

• Defaults to 4-column span on all screen sizes
• Includes responsive gutters
• Uses box-sizing: border-box
• Adapts to available columns (4 on phone, 8 on tablet, 12 on desktop)

Complete Structure Example

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">Cell 1</div>
    <div class="mdc-layout-grid__cell">Cell 2</div>
    <div class="mdc-layout-grid__cell">Cell 3</div>
  </div>
</div>

This creates a responsive grid where:

• Phone: 3 cells stacked vertically (4 columns available, cells default to 4-column span)
• Tablet: 2 cells on first row, 1 on second (8 columns available, 4+4 then 4)
• Desktop: All 3 cells in one row (12 columns available, 4+4+4)

Nested Grids

Grid structures can be nested within cells for complex layouts.

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">
      <div class="mdc-layout-grid__inner">
        <div class="mdc-layout-grid__cell">Nested cell 1</div>
        <div class="mdc-layout-grid__cell">Nested cell 2</div>
      </div>
    </div>
    <div class="mdc-layout-grid__cell">Regular cell</div>
  </div>
</div>

Nested Grid Behavior:

• Inherits the same column counts as parent grid
• Uses same gutter sizes as parent
• No additional margins (lives within parent cell)
• Can be nested to any depth (though not recommended beyond 2 levels)