Grid

Simple display grid and inline grid utilities with module mixins for responsive modifiers.

Utilities (anchor)

Grid utilities
Utility class	Property values
.grid	display: grid
.grid-inline	display: inline-grid
.grid-reset	display: initial

Responsive mixins (anchor)

Responsive modifier mixins are provided to include where required in custom breakpoints, the utilities available use the following modifier class naming convention:

.grid
.grid-xxl
.grid-xl
.grid-lg
.grid-md
.grid-sm
.grid-xs
.grid-xxs

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin as shown below.

custom.scss

@use "stylemods/scss" as *;
@include grid-css;

@media (width <= 480px) {
  @include grid-sm-css;
}

Source code (anchor)

grid.scss

// ---------------------------------------------------------- 
// Grid
// ----------------------------------------------------------
$grid-values: (
  "grid": grid,
  "grid-inline": inline-grid,
  "grid-reset": initial,
) !default;

// Grid utilities
@mixin grid-css {
  @each $name, $value in $grid-values {
    .#{$name} {
      display: #{$value};        
    }
  }
}

// XXL
@mixin grid-xxl-css {
  @each $name, $value in $grid-values {
    .#{$name}-xxl {
      display: #{$value};        
    }
  }
}

// XL
@mixin grid-xl-css {
  @each $name, $value in $grid-values {
    .#{$name}-xl {
      display: #{$value};        
    }
  }
}

// LG
@mixin grid-lg-css {
  @each $name, $value in $grid-values {
    .#{$name}-lg {
      display: #{$value};        
    }
  }
}

// MD
@mixin grid-md-css {
  @each $name, $value in $grid-values {
    .#{$name}-md {
      display: #{$value};        
    }
  }
}

// SM
@mixin grid-sm-css {
  @each $name, $value in $grid-values {
    .#{$name}-sm {
      display: #{$value};        
    }
  }
}

// XS
@mixin grid-xs-css {
  @each $name, $value in $grid-values {
    .#{$name}-xs {
      display: #{$value};        
    }
  }
}

// XXS
@mixin grid-xxs-css {
  @each $name, $value in $grid-values {
    .#{$name}-xxs {
      display: #{$value};        
    }
  }
}