CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-material--layout-grid

The Material Components for the web layout grid component

94

1.16x
Overview
Eval results
Files

sass-mixins.mddocs/

Sass Mixins

Programmatic mixins for creating custom grid implementations and responsive layouts.

Core Layout Mixins

layout-grid

Generates CSS for a grid container on a specific device type.

@mixin layout-grid($size, $margin, $max-width: null);

Parameters:

  • $size: Device type (desktop, tablet, or phone)
  • $margin: Margin size around the grid
  • $max-width: Optional maximum width constraint

Usage:

@use "@material/layout-grid" as grid;

.custom-grid {
  @include grid.layout-grid(desktop, 32px, 1200px);
}

Generated CSS:

  • Sets box-sizing to border-box
  • Centers the grid with auto margins
  • Applies specified margins with CSS custom property fallback
  • Sets maximum width if provided

inner

Generates CSS for the grid inner wrapper on a specific device type.

@mixin inner($size, $margin, $gutter);

Parameters:

  • $size: Device type (desktop, tablet, or phone)
  • $margin: Grid margin (used for CSS custom property naming)
  • $gutter: Space between grid cells

Usage:

@use "@material/layout-grid" as grid;

.custom-grid__inner {
  @include grid.inner(desktop, 24px, 16px);
}

Generated CSS:

  • Sets up flexbox layout with wrapping
  • Manages gutters with negative margins
  • Provides CSS Grid fallback with grid-template-columns
  • Uses CSS custom properties for runtime customization

cell

Generates CSS for a grid cell on a specific device type.

@mixin cell($size, $default-span, $gutter);

Parameters:

  • $size: Device type (desktop, tablet, or phone)
  • $default-span: Default column span (1-12)
  • $gutter: Gutter size matching the parent inner

Usage:

@use "@material/layout-grid" as grid;

.custom-cell {
  @include grid.cell(desktop, 6, 24px);
}

Generated CSS:

  • Sets width based on column span calculation
  • Applies gutter margins
  • Provides CSS Grid fallback behavior
  • Uses CSS custom properties for runtime theming

Specialized Mixins

fixed-column-width

Generates CSS for fixed-width column containers.

@mixin fixed-column-width($size, $margin, $gutter, $column-width);

Parameters:

  • $size: Device type (desktop, tablet, or phone)
  • $margin: Grid margin size
  • $gutter: Gutter size between columns
  • $column-width: Fixed width for each column

Usage:

@use "@material/layout-grid" as grid;

.fixed-grid {
  @include grid.fixed-column-width(desktop, 24px, 16px, 80px);
}

Generated CSS:

  • Calculates total width: (columns × column-width) + (gutters × gutter-size) + (margins × 2)
  • Uses CSS custom properties for runtime customization

cell-order

Sets the visual order of a grid cell.

@mixin cell-order($order);

Parameters:

  • $order: Order value (1-12)

Usage:

@use "@material/layout-grid" as grid;

.priority-cell {
  @include grid.cell-order(1);
}

cell-align

Sets the vertical alignment of a grid cell.

@mixin cell-align($position);

Parameters:

  • $position: Alignment position (top, middle, bottom, or stretch)

Usage:

@use "@material/layout-grid" as grid;

.centered-cell {
  @include grid.cell-align(middle);
}

Helper Functions

breakpoint-min

Returns the minimum width for a breakpoint or null for the smallest breakpoint.

@function breakpoint-min($size);

Parameters:

  • $size: Device type (desktop, tablet, or phone)

Returns: Pixel value or null

Usage:

@use "@material/layout-grid" as grid;

$desktop-min: grid.breakpoint-min(desktop); // Returns 840px
$phone-min: grid.breakpoint-min(phone);     // Returns null

breakpoint-max

Returns the maximum width for a breakpoint or null for the largest breakpoint.

@function breakpoint-max($size);

Parameters:

  • $size: Device type (desktop, tablet, or phone)

Returns: Pixel value or null

Usage:

@use "@material/layout-grid" as grid;

$tablet-max: grid.breakpoint-max(tablet);   // Returns 839px
$desktop-max: grid.breakpoint-max(desktop); // Returns null

Complete Custom Grid Example

@use "@material/layout-grid" as grid;

// Custom responsive grid
.article-grid {
  // Desktop layout
  @media (min-width: 840px) {
    @include grid.layout-grid(desktop, 32px, 1200px);
  }
  
  // Tablet layout
  @media (min-width: 600px) and (max-width: 839px) {
    @include grid.layout-grid(tablet, 24px);
  }
  
  // Phone layout
  @media (max-width: 599px) {
    @include grid.layout-grid(phone, 16px);
  }
}

.article-grid__inner {
  @media (min-width: 840px) {
    @include grid.inner(desktop, 32px, 20px);
  }
  
  @media (min-width: 600px) and (max-width: 839px) {
    @include grid.inner(tablet, 24px, 16px);
  }
  
  @media (max-width: 599px) {
    @include grid.inner(phone, 16px, 12px);
  }
}

.article-grid__main {
  @media (min-width: 840px) {
    @include grid.cell(desktop, 8, 20px);
  }
  
  @media (min-width: 600px) and (max-width: 839px) {
    @include grid.cell(tablet, 6, 16px);
  }
  
  @media (max-width: 599px) {
    @include grid.cell(phone, 4, 12px);
  }
}

.article-grid__sidebar {
  @include grid.cell-align(top);
  
  @media (min-width: 840px) {
    @include grid.cell(desktop, 4, 20px);
    @include grid.cell-order(2);
  }
  
  @media (min-width: 600px) and (max-width: 839px) {
    @include grid.cell(tablet, 2, 16px);
  }
  
  @media (max-width: 599px) {
    @include grid.cell(phone, 4, 12px);
    @include grid.cell-order(1); // Show first on mobile
  }
}

Device Size Reference

When using mixins, these are the available device sizes:

  • desktop: 840px+, 12 columns available
  • tablet: 600px-839px, 8 columns available
  • phone: 0px-599px, 4 columns available

Install with Tessl CLI

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

docs

cell-alignment.md

cell-spanning.md

grid-modifiers.md

grid-structure.md

index.md

sass-mixins.md

sass-variables.md

tile.json