CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

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

Overview
Eval results
Files

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 */ }

CSS Classes

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;

Variables

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);

Mixins

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@material/layout-grid@13.0.x