tessl/npm-material--layout-grid

The Material Components for the web layout grid component

1.16x

Overview

Eval results

Files

Cell Spanning and Layout

Name: tessl/npm-material--layout-grid
Rating: 0.94 (1 reviews)
Author: tessl

Classes for controlling how many columns a cell spans across different screen sizes.

Universal Span Classes

Apply the same column span across all screen sizes.

.mdc-layout-grid__cell--span-1   /* 1 column */
.mdc-layout-grid__cell--span-2   /* 2 columns */
.mdc-layout-grid__cell--span-3   /* 3 columns */
.mdc-layout-grid__cell--span-4   /* 4 columns (default) */
.mdc-layout-grid__cell--span-5   /* 5 columns */
.mdc-layout-grid__cell--span-6   /* 6 columns */
.mdc-layout-grid__cell--span-7   /* 7 columns */
.mdc-layout-grid__cell--span-8   /* 8 columns */
.mdc-layout-grid__cell--span-9   /* 9 columns */
.mdc-layout-grid__cell--span-10  /* 10 columns */
.mdc-layout-grid__cell--span-11  /* 11 columns */
.mdc-layout-grid__cell--span-12  /* 12 columns (full width) */

Usage:

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
    Half width on all screens
  </div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
    Half width on all screens
  </div>
</div>

Device-Specific Span Classes

Control column spans for specific screen sizes.

/* Desktop-specific spans (840px+) */
.mdc-layout-grid__cell--span-1-desktop
.mdc-layout-grid__cell--span-2-desktop
/* ... through span-12-desktop */

/* Tablet-specific spans (600px-839px) */
.mdc-layout-grid__cell--span-1-tablet
.mdc-layout-grid__cell--span-2-tablet
/* ... through span-8-tablet */

/* Phone-specific spans (0px-599px) */
.mdc-layout-grid__cell--span-1-phone
.mdc-layout-grid__cell--span-2-phone
/* ... through span-4-phone */

Usage:

<div class="mdc-layout-grid__cell 
     mdc-layout-grid__cell--span-6-desktop
     mdc-layout-grid__cell--span-4-tablet
     mdc-layout-grid__cell--span-4-phone">
  Responsive cell: 6 cols desktop, 4 cols tablet, 4 cols phone
</div>

Span Behavior Rules

Column Overflow Handling

When a span exceeds available columns, the cell behaves as if it spans all available columns:

<!-- On phone (4 columns available) -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
  <!-- Acts as span-4 on phone -->
</div>

Default Span Fallback

Cells without explicit span classes default to 4-column span:

<div class="mdc-layout-grid__cell">
  <!-- Spans 4 columns on all screen sizes -->
</div>

Combining Universal and Device-Specific

Device-specific classes override universal classes:

<div class="mdc-layout-grid__cell 
     mdc-layout-grid__cell--span-12
     mdc-layout-grid__cell--span-6-desktop">
  <!-- 12 columns on tablet/phone, 6 columns on desktop -->
</div>

Common Layout Patterns

Equal Width Columns

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 1</div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 2</div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Column 3</div>
</div>

Sidebar Layout

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell 
       mdc-layout-grid__cell--span-8-desktop
       mdc-layout-grid__cell--span-6-tablet
       mdc-layout-grid__cell--span-4-phone">
    Main content
  </div>
  <div class="mdc-layout-grid__cell 
       mdc-layout-grid__cell--span-4-desktop
       mdc-layout-grid__cell--span-2-tablet
       mdc-layout-grid__cell--span-4-phone">
    Sidebar
  </div>
</div>

Hero + Cards Layout

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
    Hero section (full width)
  </div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 1</div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 2</div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">Card 3</div>
</div>

Available Columns by Device

Desktop (840px+): 1-12 columns available
Tablet (600px-839px): 1-8 columns available
Phone (0px-599px): 1-4 columns available

Install with Tessl CLI

npx tessl i tessl/npm-material--layout-grid