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-variables.mddocs/

Sass Variables and Customization

Configuration variables and CSS custom properties for customizing the grid system.

Configuration Maps

$breakpoints

Defines the responsive breakpoints for each device type.

$breakpoints: (
  desktop: 840px,
  tablet: 600px,
  phone: 0px,
) !default;

Usage:

@use "@material/layout-grid" with (
  $breakpoints: (
    desktop: 1024px,
    tablet: 768px,
    phone: 0px,
  )
);

$columns

Specifies the number of columns available for each device type.

$columns: (
  desktop: 12,
  tablet: 8,
  phone: 4,
) !default;

Usage:

@use "@material/layout-grid" with (
  $columns: (
    desktop: 16,  // More columns on desktop
    tablet: 8,
    phone: 4,
  )
);

$default-margin

Default margin values around the grid for each device type.

$default-margin: (
  desktop: 24px,
  tablet: 16px,
  phone: 16px,
) !default;

Usage:

@use "@material/layout-grid" with (
  $default-margin: (
    desktop: 32px,
    tablet: 24px,
    phone: 16px,
  )
);

$default-gutter

Default gutter size between grid cells for each device type.

$default-gutter: (
  desktop: 24px,
  tablet: 16px,
  phone: 16px,
) !default;

Usage:

@use "@material/layout-grid" with (
  $default-gutter: (
    desktop: 32px,
    tablet: 20px,
    phone: 12px,
  )
);

$column-width

Column widths used with fixed-column-width modifier.

$column-width: (
  desktop: 72px,
  tablet: 72px,
  phone: 72px,
) !default;

Usage:

@use "@material/layout-grid" with (
  $column-width: (
    desktop: 80px,
    tablet: 70px,
    phone: 60px,
  )
);

Single Value Variables

$default-column-span

Default column span for cells without explicit span classes.

$default-column-span: 4 !default;

Usage:

@use "@material/layout-grid" with (
  $default-column-span: 6
);

$max-width

Maximum width constraint for the grid container.

$max-width: null !default;

Usage:

@use "@material/layout-grid" with (
  $max-width: 1200px
);

CSS Custom Properties

Runtime customization through CSS custom properties (CSS variables).

Margin Properties

--mdc-layout-grid-margin-desktop   /* Override desktop margins */
--mdc-layout-grid-margin-tablet    /* Override tablet margins */
--mdc-layout-grid-margin-phone     /* Override phone margins */

Usage:

.custom-grid {
  --mdc-layout-grid-margin-desktop: 40px;
  --mdc-layout-grid-margin-tablet: 30px;
  --mdc-layout-grid-margin-phone: 20px;
}

Gutter Properties

--mdc-layout-grid-gutter-desktop   /* Override desktop gutters */
--mdc-layout-grid-gutter-tablet    /* Override tablet gutters */
--mdc-layout-grid-gutter-phone     /* Override phone gutters */

Usage:

.tight-grid {
  --mdc-layout-grid-gutter-desktop: 16px;
  --mdc-layout-grid-gutter-tablet: 12px;
  --mdc-layout-grid-gutter-phone: 8px;
}

Column Width Properties

--mdc-layout-grid-column-width-desktop   /* Override desktop column width */
--mdc-layout-grid-column-width-tablet    /* Override tablet column width */
--mdc-layout-grid-column-width-phone     /* Override phone column width */

Usage:

.wide-columns {
  --mdc-layout-grid-column-width-desktop: 100px;
  --mdc-layout-grid-column-width-tablet: 80px;
  --mdc-layout-grid-column-width-phone: 60px;
}

Complete Customization Examples

Compile-Time Customization

// Custom configuration at compile-time
@use "@material/layout-grid" with (
  $breakpoints: (
    desktop: 1200px,
    tablet: 768px,
    phone: 0px,
  ),
  $columns: (
    desktop: 16,
    tablet: 12,
    phone: 6,
  ),
  $default-margin: (
    desktop: 40px,
    tablet: 30px,
    phone: 20px,
  ),
  $default-gutter: (
    desktop: 32px,
    tablet: 24px,
    phone: 16px,
  ),
  $max-width: 1400px
);

Runtime Customization

/* Theme variations using CSS custom properties */
.theme-compact {
  --mdc-layout-grid-margin-desktop: 16px;
  --mdc-layout-grid-margin-tablet: 12px;
  --mdc-layout-grid-margin-phone: 8px;
  --mdc-layout-grid-gutter-desktop: 16px;
  --mdc-layout-grid-gutter-tablet: 12px;
  --mdc-layout-grid-gutter-phone: 8px;
}

.theme-spacious {
  --mdc-layout-grid-margin-desktop: 48px;
  --mdc-layout-grid-margin-tablet: 32px;
  --mdc-layout-grid-margin-phone: 24px;
  --mdc-layout-grid-gutter-desktop: 40px;
  --mdc-layout-grid-gutter-tablet: 28px;
  --mdc-layout-grid-gutter-phone: 20px;
}

.theme-fixed-narrow {
  --mdc-layout-grid-column-width-desktop: 60px;
  --mdc-layout-grid-column-width-tablet: 55px;
  --mdc-layout-grid-column-width-phone: 50px;
}

Mixed Customization

// Compile-time base configuration
@use "@material/layout-grid" with (
  $max-width: 1200px,
  $default-column-span: 6
);

// Import the configured grid
@use "@material/layout-grid/mdc-layout-grid";
/* Runtime theme switching */
[data-theme="dark"] {
  --mdc-layout-grid-margin-desktop: 32px;
  --mdc-layout-grid-gutter-desktop: 32px;
}

[data-theme="light"] {
  --mdc-layout-grid-margin-desktop: 24px;
  --mdc-layout-grid-gutter-desktop: 24px;
}

@media (max-width: 599px) {
  [data-theme="mobile"] {
    --mdc-layout-grid-margin-phone: 12px;
    --mdc-layout-grid-gutter-phone: 12px;
  }
}

Default Values Reference

VariableDesktopTabletPhone
Breakpoint840px+600px-839px0px-599px
Columns1284
Margin24px16px16px
Gutter24px16px16px
Column Width72px72px72px

Other Defaults:

  • Default column span: 4
  • Maximum width: none (null)

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