tessl/npm-material--layout-grid
Material Design responsive grid system with flexible SCSS mixins and CSS classes for creating adaptive layouts across desktop, tablet, and phone devices
css-classes.mddocs/
CSS Classes
Pre-built CSS classes that provide complete responsive grid functionality without requiring SCSS compilation. These classes handle all responsive behavior, spacing, and layout automatically.
Capabilities
Base Grid Structure
Core classes that establish the grid layout structure.
/**
* Main grid container - required outer wrapper
* Provides responsive margins and max-width constraints
*/
.mdc-layout-grid { }
/**
* Inner grid wrapper - required cell container
* Establishes flex/grid layout and gutter spacing
*/
.mdc-layout-grid__inner { }
/**
* Individual grid cell - applied to each grid item
* Default span of 4 columns with responsive behavior
*/
.mdc-layout-grid__cell { }Usage Example:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">Content</div>
<div class="mdc-layout-grid__cell">Content</div>
</div>
</div>Cell Spanning
Classes that control how many columns a cell occupies across different device types.
/**
* Universal column spanning - applies to all device types
* {span} ranges from 1 to 12 columns
*/
.mdc-layout-grid__cell--span-{span} { }
/**
* Device-specific column spanning
* {span} ranges from 1 to 12 columns
* {device} is desktop, tablet, or phone
*/
.mdc-layout-grid__cell--span-{span}-{device} { }Available span classes:
.mdc-layout-grid__cell--span-1through.mdc-layout-grid__cell--span-12.mdc-layout-grid__cell--span-1-desktopthrough.mdc-layout-grid__cell--span-12-desktop.mdc-layout-grid__cell--span-1-tabletthrough.mdc-layout-grid__cell--span-8-tablet.mdc-layout-grid__cell--span-1-phonethrough.mdc-layout-grid__cell--span-4-phone
Usage Examples:
<!-- Full width on all devices -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
Full width content
</div>
<!-- Half width on desktop, full width on tablet/phone -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
Responsive content
</div>
<!-- Different spans per device -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-desktop mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-2-phone">
Multi-device span
</div>Cell Ordering
Classes that control the visual order of cells while preserving source order for accessibility.
/**
* Cell ordering classes
* {order} ranges from 1 to 12
* Lower numbers appear first, higher numbers appear last
*/
.mdc-layout-grid__cell--order-{order} { }Available order classes:
.mdc-layout-grid__cell--order-1through.mdc-layout-grid__cell--order-12
Usage Example:
<div class="mdc-layout-grid__inner">
<!-- This cell appears second visually -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-2">
Second
</div>
<!-- This cell appears first visually -->
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--order-1">
First
</div>
</div>Cell Alignment
Classes that control the vertical alignment of cells within the grid row.
/**
* Top alignment - aligns cell content to the top of the row
*/
.mdc-layout-grid__cell--align-top { }
/**
* Middle alignment - centers cell content vertically within the row
*/
.mdc-layout-grid__cell--align-middle { }
/**
* Bottom alignment - aligns cell content to the bottom of the row
*/
.mdc-layout-grid__cell--align-bottom { }Usage Example:
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-top">
<p>Top aligned content</p>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-middle">
<p>Center aligned content</p>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--align-bottom">
<p>Bottom aligned content</p>
</div>
</div>Grid Layout Modifiers
Classes that modify the behavior of the entire grid container.
/**
* Fixed column width - sets columns to a fixed width instead of fluid
* Uses CSS custom properties --mdc-layout-grid-column-width-{device}
* Default column width is 72px for all devices
*/
.mdc-layout-grid--fixed-column-width { }
/**
* Left-align grid - aligns the entire grid to the left of its container
* Only visible when grid doesn't fill the full container width
*/
.mdc-layout-grid--align-left { }
/**
* Right-align grid - aligns the entire grid to the right of its container
* Only visible when grid doesn't fill the full container width
*/
.mdc-layout-grid--align-right { }Usage Examples:
<!-- Fixed column width grid -->
<div class="mdc-layout-grid mdc-layout-grid--fixed-column-width">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">Fixed width columns</div>
</div>
</div>
<!-- Left-aligned grid -->
<div class="mdc-layout-grid mdc-layout-grid--align-left" style="max-width: 800px;">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell">Left aligned grid</div>
</div>
</div>Nested Grids
Grids can be nested within cells for more complex layouts. Nested grids maintain the same column counts and gutter sizes as their parents.
Usage Example:
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
<!-- Nested grid within a cell -->
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
Nested cell 1
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
Nested cell 2
</div>
</div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
Regular cell
</div>
</div>
</div>CSS Custom Properties Integration
All CSS classes support runtime customization through CSS custom properties:
:root {
/* Margins for each device type */
--mdc-layout-grid-margin-desktop: 24px;
--mdc-layout-grid-margin-tablet: 16px;
--mdc-layout-grid-margin-phone: 16px;
/* Gutters for each device type */
--mdc-layout-grid-gutter-desktop: 24px;
--mdc-layout-grid-gutter-tablet: 16px;
--mdc-layout-grid-gutter-phone: 16px;
/* Column widths for fixed-width grids */
--mdc-layout-grid-column-width-desktop: 72px;
--mdc-layout-grid-column-width-tablet: 72px;
--mdc-layout-grid-column-width-phone: 72px;
}Responsive Behavior
The grid system automatically applies different column counts based on screen size:
- Desktop (840px+): 12 columns, 24px margins/gutters
- Tablet (600px-839px): 8 columns, 16px margins/gutters
- Phone (0px-599px): 4 columns, 16px margins/gutters
Cells that span more columns than available will automatically cap at the maximum for that device type.
tessl i tessl/npm-material--layout-grid@13.0.0