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
index.mddocs/
Material Layout Grid
Material Layout Grid is a CSS-only responsive grid system based on Material Design guidelines. It provides a flexible, column-variant grid layout with 12 columns on desktop, 8 columns on tablet, and 4 columns on phone, using both modern CSS Grid and Flexbox fallback support.
Package Information
- Package Name: @material/layout-grid
- Package Type: npm
- Language: SCSS/CSS
- Installation:
npm install @material/layout-grid
Core Imports
Main import (all APIs):
@use "@material/layout-grid";Selective imports:
@use "@material/layout-grid/_variables.import" as variables;
@use "@material/layout-grid/_mixins.import" as mixins;Namespaced import:
@use "@material/layout-grid" as grid;CSS-only styles:
@use "@material/layout-grid/mdc-layout-grid";Basic Usage
HTML Structure:
<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>Basic SCSS styling:
@use "@material/layout-grid/mdc-layout-grid";
// Custom styling with mixins
@use "@material/layout-grid/_mixins.import" as mixins;
.my-grid {
@include mixins.layout-grid(desktop, 32px);
}Architecture
Material Layout Grid is built around several key components:
- CSS Classes: Pre-built responsive grid classes for immediate use
- SCSS Variables: Configurable breakpoints, margins, gutters, and column counts
- SCSS Mixins: Programmatic grid generation for custom styling
- Device Types: Three responsive breakpoints (desktop, tablet, phone)
- Grid Systems: CSS Grid with Flexbox fallback for maximum browser compatibility
- Custom Properties: Runtime customization through CSS custom properties
Capabilities
CSS Classes
Pre-built CSS classes that provide complete grid functionality without requiring SCSS compilation. Includes responsive grid containers, cell spanning, alignment, and ordering.
.mdc-layout-grid { /* Grid container */ }
.mdc-layout-grid__inner { /* Cell wrapper */ }
.mdc-layout-grid__cell { /* Grid cell */ }
.mdc-layout-grid__cell--span-{1-12} { /* Cell spanning */ }
.mdc-layout-grid__cell--span-{1-12}-{device} { /* Device-specific spanning */ }
.mdc-layout-grid__cell--order-{1-12} { /* Cell ordering */ }
.mdc-layout-grid__cell--align-{position} { /* Cell alignment */ }
.mdc-layout-grid--fixed-column-width { /* Fixed column widths */ }
.mdc-layout-grid--align-{position} { /* Grid alignment */ }SCSS Variables
Configuration variables that define breakpoints, columns, spacing, and default behaviors across device types. These can be customized before importing the library.
$breakpoints: (
desktop: 840px,
tablet: 600px,
phone: 0px,
) !default;
$columns: (
desktop: 12,
tablet: 8,
phone: 4,
) !default;
$default-margin: (
desktop: 24px,
tablet: 16px,
phone: 16px,
) !default;
$default-gutter: (
desktop: 24px,
tablet: 16px,
phone: 16px,
) !default;SCSS Mixins
Programmatic mixins and functions for generating custom grid layouts with full control over spacing, sizing, and behavior. Perfect for creating custom grid implementations.
// Utility functions
@function breakpoint-min($size);
@function breakpoint-max($size);
// Core mixins
@mixin layout-grid($size, $margin, $max-width: null);
@mixin inner($size, $margin, $gutter);
@mixin cell($size, $default-span, $gutter);
@mixin cell-order($order);
@mixin cell-align($position);
@mixin fixed-column-width($size, $margin, $gutter, $column-width);Types
// Device size types
type DeviceSize = 'desktop' | 'tablet' | 'phone';
// Alignment positions
type AlignPosition = 'top' | 'middle' | 'bottom' | 'stretch';
// Grid alignment
type GridPosition = 'left' | 'right';
// Column span range
type ColumnSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
// Order index range
type OrderIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;tessl i tessl/npm-material--layout-grid@13.0.0