tessl/npm-material--layout-grid

The Material Components for the web layout grid component

1.16x

Overview

Eval results

Files

Grid Modifiers

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

Modifier classes that change the overall behavior and appearance of the grid container.

Fixed Column Width

Force the grid to use fixed column widths instead of flexible columns.

.mdc-layout-grid--fixed-column-width {
  /* Sets fixed width columns with configurable column size */
}

Usage:

<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      Fixed width columns
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      Fixed width columns
    </div>
  </div>
</div>

Default Fixed Column Widths

Desktop: 72px per column
Tablet: 72px per column
Phone: 72px per column

Behavior

Grid container width becomes fixed based on column count and sizes
Useful for layouts that need consistent column proportions
Total width = (columns × column-width) + (gutters × gutter-size) + (margins × 2)

Customization via CSS Custom Properties

.custom-fixed-grid {
  --mdc-layout-grid-column-width-desktop: 80px;
  --mdc-layout-grid-column-width-tablet: 70px;
  --mdc-layout-grid-column-width-phone: 60px;
}

Grid Alignment

Control the horizontal alignment of the entire grid within its container.

.mdc-layout-grid--align-left   /* Left-align the grid */
.mdc-layout-grid--align-right  /* Right-align the grid */

Default Behavior: Grid is center-aligned.

Left Alignment

<div class="mdc-layout-grid mdc-layout-grid--align-left">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">Left-aligned grid</div>
  </div>
</div>

Right Alignment

<div class="mdc-layout-grid mdc-layout-grid--align-right">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">Right-aligned grid</div>
  </div>
</div>

When Alignment Takes Effect

Grid alignment modifiers only have visual effect when:

The grid has a maximum width constraint and the viewport is wider
Using fixed column width that results in a narrower grid than the container
The grid content doesn't fill the full container width

Combining Modifiers

You can combine multiple modifier classes:

<div class="mdc-layout-grid 
     mdc-layout-grid--fixed-column-width
     mdc-layout-grid--align-right">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
      Fixed-width, right-aligned grid
    </div>
  </div>
</div>

Use Cases

Fixed Column Width Use Cases

Data tables where consistent column sizes are important
Image galleries with fixed thumbnail sizes
Form layouts with consistent field widths
Card layouts where card widths should remain constant

Grid Alignment Use Cases

Landing pages with centered content blocks
Sidebar layouts where main content is left-aligned
Marketing layouts with right-aligned call-to-action sections

Examples

Photo Gallery with Fixed Columns

<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
      <img src="photo1.jpg" alt="Photo 1">
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
      <img src="photo2.jpg" alt="Photo 2">
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
      <img src="photo3.jpg" alt="Photo 3">
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3">
      <img src="photo4.jpg" alt="Photo 4">
    </div>
  </div>
</div>

Right-Aligned Call-to-Action Section

<section class="mdc-layout-grid mdc-layout-grid--align-right">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      <h2>Ready to get started?</h2>
      <button>Sign Up Now</button>
    </div>
  </div>
</section>

Centered Fixed-Width Form

<form class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      <label for="email">Email</label>
      <input type="email" id="email" name="email">
    </div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
      <label for="password">Password</label>
      <input type="password" id="password" name="password">
    </div>
  </div>
</form>

Install with Tessl CLI

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