tessl/npm-material--layout-grid

The Material Components for the web layout grid component

1.16x

Overview

Eval results

Files

Cell Alignment and Ordering

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

Classes for controlling cell vertical alignment and visual order within the grid.

Vertical Alignment

Control how cells align vertically within their row.

.mdc-layout-grid__cell--align-top     /* Align to top of row */
.mdc-layout-grid__cell--align-middle  /* Center vertically in row */
.mdc-layout-grid__cell--align-bottom  /* Align to bottom of row */

Default Behavior: Cells stretch to fill the full height of their row.

Top Alignment

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top">
    <p>Short content</p>
  </div>
  <div class="mdc-layout-grid__cell">
    <p>Much longer content that makes this cell taller and determines the row height. This cell will stretch to its natural height.</p>
  </div>
</div>

Middle Alignment

<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle">
  Content centered vertically in the row
</div>

Bottom Alignment

<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom">
  Content aligned to bottom of row
</div>

Visual Ordering

Change the visual order of cells without affecting the DOM order.

.mdc-layout-grid__cell--order-1   /* First in visual order */
.mdc-layout-grid__cell--order-2   /* Second in visual order */
.mdc-layout-grid__cell--order-3   /* Third in visual order */
.mdc-layout-grid__cell--order-4   /* Fourth in visual order */
.mdc-layout-grid__cell--order-5   /* Fifth in visual order */
.mdc-layout-grid__cell--order-6   /* Sixth in visual order */
.mdc-layout-grid__cell--order-7   /* Seventh in visual order */
.mdc-layout-grid__cell--order-8   /* Eighth in visual order */
.mdc-layout-grid__cell--order-9   /* Ninth in visual order */
.mdc-layout-grid__cell--order-10  /* Tenth in visual order */
.mdc-layout-grid__cell--order-11  /* Eleventh in visual order */
.mdc-layout-grid__cell--order-12  /* Twelfth in visual order */

Basic Ordering Example

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3">
    Third visually (first in DOM)
  </div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1">
    First visually (second in DOM)
  </div>
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2">
    Second visually (third in DOM)
  </div>
</div>

Responsive Ordering

Use multiple order classes for different responsive behaviors:

<div class="mdc-layout-grid__cell 
     mdc-layout-grid__cell--order-1
     mdc-layout-grid__cell--span-6-desktop
     mdc-layout-grid__cell--span-8-tablet">
  Important content - shows first on all devices
</div>
<div class="mdc-layout-grid__cell 
     mdc-layout-grid__cell--order-2
     mdc-layout-grid__cell--span-6-desktop
     mdc-layout-grid__cell--span-8-tablet">
  Secondary content - shows second
</div>

Accessibility Considerations

Important: Visual reordering affects screen readers and keyboard navigation. The order property changes visual presentation but not DOM order.

Screen Reader Impact

Screen readers follow DOM order, not visual order:

<!-- Screen readers read: "First", "Second", "Third" -->
<!-- Visual order shows: "Third", "First", "Second" -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2">First</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-3">Second</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1">Third</div>

Keyboard Navigation Impact

Tab order follows DOM order, not visual order, which can confuse keyboard users.

Best Practices

Use visual ordering sparingly
Ensure DOM order makes logical sense for screen readers
Test with keyboard navigation
Consider whether content restructuring would be better than visual reordering

Combining Alignment and Ordering

You can combine alignment and ordering classes:

<div class="mdc-layout-grid__cell 
     mdc-layout-grid__cell--align-middle
     mdc-layout-grid__cell--order-2
     mdc-layout-grid__cell--span-6">
  Centered vertically, second in visual order, half width
</div>

Advanced Layout Examples

Card Layout with Ordering

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell 
       mdc-layout-grid__cell--span-8
       mdc-layout-grid__cell--order-2">
    <article>Main article content</article>
  </div>
  <div class="mdc-layout-grid__cell 
       mdc-layout-grid__cell--span-4
       mdc-layout-grid__cell--order-1
       mdc-layout-grid__cell--align-top">
    <aside>Sidebar that appears first visually</aside>
  </div>
</div>

Vertically Aligned Button Row

<div class="mdc-layout-grid__inner">
  <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
    <h2>Section Title</h2>
    <p>Section content with variable height...</p>
  </div>
  <div class="mdc-layout-grid__cell 
       mdc-layout-grid__cell--span-4
       mdc-layout-grid__cell--align-middle">
    <button>Action Button</button>
  </div>
</div>

Install with Tessl CLI

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