Grids

Grid utilities plus two 12 column display grids with module mixins for responsive modifiers.

Utilities (anchor)

Grid utilities and property values
Utility class	Property values
.grid	display: grid
.grid-inline	display: inline-grid
Grid template columns (see examples below)
Fraction widths	Property: [grid-template-columns]
.g-1	minmax(0, 1fr)
.g-2	repeat(2, minmax(0, 1fr))
.g-3	repeat(3, minmax(0, 1fr))
.g-4	repeat(4, minmax(0, 1fr))
.g-5	repeat(5, minmax(0, 1fr))
.g-6	repeat(6, minmax(0, 1fr))
.g-7	repeat(7, minmax(0, 1fr))
.g-8	repeat(8, minmax(0, 1fr))
.g-9	repeat(9, minmax(0, 1fr))
.g-10	repeat(10, minmax(0, 1fr))
.g-11	repeat(11, minmax(0, 1fr))
.g-12	repeat(12, minmax(0, 1fr))
Auto widths	Property: [grid-template-columns]
.ga-1	minmax(0, auto)
.ga-2	repeat(2, minmax(0, auto))
.ga-3	repeat(3, minmax(0, auto))
.ga-4	repeat(4, minmax(0, auto))
.ga-5	repeat(5, minmax(0, auto))
.ga-6	repeat(6, minmax(0, auto))
.ga-7	repeat(7, minmax(0, auto))
.ga-8	repeat(8, minmax(0, auto))
.ga-9	repeat(9, minmax(0, auto))
.ga-10	repeat(10, minmax(0, auto))
.ga-11	repeat(11, minmax(0, auto))
.ga-12	repeat(12, minmax(0, auto))

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:

.g-5
.g-5-xxl
.g-5-xl
.g-5-lg
.g-5-md
.g-5-sm
.g-5-xs
.g-5-xxs

Examples (anchor)

The grid-template-columns utilities combine with the .grid to create fixed width grid column patterns with fraction values and variable width column patterns with auto values.

Fraction column (.g-*) widths stayed fixed regardless of content:

The quick brown fox jumps over the lazy dog.

Auto column (.ga-*) widths vary according to the content:

The quick brown fox jumps over the lazy dog.

Examples HTML

// Fraction widths
<div class="grid ga-2-xs g-4 gap-3">
  <div>1</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>3</div>
  <div>4</div>
</div>

// Auto widths
<div class="grid ga-2-xs ga-4 gap-3">
  <div>1</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>3</div>
  <div>4</div>
</div>

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 demonstrated below.

The grid-utilities-css provides the base display grid and inline-grid utilities and responsive modifier classes and can be used without the two different grid types.

custom.scss

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

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

You can include the two different grid types individually:

custom.scss

@use "stylemods/scss" as *;
@include fraction-grid-variables-css; 
@include auto-grid-variables-css;
@include fraction-grid-css;
@include auto-grid-css;
@include grid-utilities-css;

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

You can also include them with combined mixins for both grid types and the default base grid utility. The first mixin includes both the variables and utility classes, the responsive mixin options compile the modifier utilities only.

custom.scss

@use "stylemods/scss" as *;
@include all-grids-css;
@media (width <= 480px) {
  @include all-grids-sm-css;
}

By default the CSS variables are compiled using a :where(html) pseudo-class style to contain the tokens. This can be customized with overrides to use :root or another selector as required, see the customizing page for more information about how the overrides can be included.

custom.scss

@use 'stylemods/scss' with (
  $grid-tokens: root,
);
@use "stylemods/scss" as *;
@include all-grids-css;

Source code (anchor)

See the Sass maps section on the customizing page to view how the maps used in the source code below can be used to control what grids are compiled, for example how to limit the amount of columns included with each grid type.

grid.scss

// ---------------------------------------------------------- 
// Grids
// ----------------------------------------------------------
$grid-tokens:     where(html) !default;

$grid-utilities-values: (
  "grid": grid,
  "grid-inline": inline-grid,
) !default;

$fraction-grid-values: (
  "g-1": minmax(0, 1fr),
  "g-2": repeat(2, minmax(0, 1fr)),
  "g-3": repeat(3, minmax(0, 1fr)),
  "g-4": repeat(4, minmax(0, 1fr)),
  "g-5": repeat(5, minmax(0, 1fr)),
  "g-6": repeat(6, minmax(0, 1fr)),
  "g-7": repeat(7, minmax(0, 1fr)),
  "g-8": repeat(8, minmax(0, 1fr)),
  "g-9": repeat(9, minmax(0, 1fr)),
  "g-10": repeat(10, minmax(0, 1fr)),
  "g-11": repeat(11, minmax(0, 1fr)),
  "g-12": repeat(12, minmax(0, 1fr)),
) !default;

$auto-grid-values: (
  "ga-1": auto,
  "ga-2": repeat(2, minmax(0, auto)),
  "ga-3": repeat(3, minmax(0, auto)),
  "ga-4": repeat(4, minmax(0, auto)),
  "ga-5": repeat(5, minmax(0, auto)),
  "ga-6": repeat(6, minmax(0, auto)),
  "ga-7": repeat(7, minmax(0, auto)),
  "ga-8": repeat(8, minmax(0, auto)),
  "ga-9": repeat(9, minmax(0, auto)),
  "ga-10": repeat(10, minmax(0, auto)),
  "ga-11": repeat(11, minmax(0, auto)),
  "ga-12": repeat(12, minmax(0, auto)),
) !default;


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

@mixin fraction-grid-variables {
  @each $name, $value in $fraction-grid-values {
    --#{$name}: #{$value};
  }
}

@mixin fraction-grid-variables-css {
  :#{$grid-tokens} {
    @include fraction-grid-variables;
  }
}

@mixin auto-grid-variables {
  @each $name, $value in $auto-grid-values {
    --#{$name}: #{$value};
  }
}

@mixin auto-grid-variables-css {
  :#{$grid-tokens} {
    @include auto-grid-variables;
  }
}

@mixin all-grid-variables-css {
  :#{$grid-tokens} {
    @include fraction-grid-variables;
    @include auto-grid-variables;
  }
}

@mixin fraction-grid-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name} {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-css {
  @each $name, $value in $auto-grid-values {
    .#{$name} {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-css {
  @include all-grid-variables-css;
  @include grid-utilities-css;
  @include fraction-grid-css;
  @include auto-grid-css;
}

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

@mixin fraction-grid-xxl-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-xxl {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-xxl-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-xxl {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-xxl-css {
  @include grid-utilities-xxl-css;
  @include fraction-grid-xxl-css;
  @include auto-grid-xxl-css;
}

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

@mixin fraction-grid-xl-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-xl {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-xl-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-xl {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-xl-css {
  @include grid-utilities-xl-css;
  @include fraction-grid-xl-css;
  @include auto-grid-xl-css;
}

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

@mixin fraction-grid-lg-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-lg {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-lg-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-lg {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-lg-css {
  @include grid-utilities-lg-css;
  @include fraction-grid-lg-css;
  @include auto-grid-lg-css;
}

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

@mixin fraction-grid-md-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-md {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-md-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-md {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-md-css {
  @include grid-utilities-md-css;
  @include fraction-grid-md-css;
  @include auto-grid-md-css;
}

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

@mixin fraction-grid-sm-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-sm {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-sm-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-sm {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-sm-css {
  @include grid-utilities-sm-css;
  @include fraction-grid-sm-css;
  @include auto-grid-sm-css;
}

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

@mixin fraction-grid-xs-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-xs {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-xs-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-xs {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-xs-css {
  @include grid-utilities-xs-css;
  @include fraction-grid-xs-css;
  @include auto-grid-xs-css;
}

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

@mixin fraction-grid-xxs-css {
  @each $name, $value in $fraction-grid-values {
    .#{$name}-xxs {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin auto-grid-xxs-css {
  @each $name, $value in $auto-grid-values {
    .#{$name}-xxs {
      grid-template-columns: var(--#{$name});        
    }
  }
}

@mixin all-grids-xxs-css {
  @include grid-utilities-xxs-css;
  @include fraction-grid-xxs-css;
  @include auto-grid-xxs-css;
}