Grid templates

Fixed and variable width grid template utilities with module mixins for responsive modifiers.

Examples (anchor)

The fixed columns use fraction widths (1fr) so the column size remains the same regardless of content:

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

The variable columns use automatic widths (auto) so the column size adjusts according to the content:

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

Utilities (anchor)

Grid utilities
Utility class Property values
.grid display: grid
.grid-inline display: inline-grid
Grid template columns utilities
Utility class Property values
Fraction widths
.g-1 grid-template-columns: repeat(1, minmax(0, 1fr))
.g-2 grid-template-columns: repeat(2, minmax(0, 1fr))
.g-3 grid-template-columns: repeat(3, minmax(0, 1fr))
.g-4 grid-template-columns: repeat(4, minmax(0, 1fr))
.g-5 grid-template-columns: repeat(5, minmax(0, 1fr))
.g-6 grid-template-columns: repeat(6, minmax(0, 1fr))
.g-7 grid-template-columns: repeat(7, minmax(0, 1fr))
.g-8 grid-template-columns: repeat(8, minmax(0, 1fr))
.g-9 grid-template-columns: repeat(9, minmax(0, 1fr))
.g-10 grid-template-columns: repeat(10, minmax(0, 1fr))
.g-11 grid-template-columns: repeat(11, minmax(0, 1fr))
.g-12 grid-template-columns: repeat(12, minmax(0, 1fr))
Auto widths
.ga-1 grid-template-columns: repeat(1, minmax(0, auto))
.ga-2 grid-template-columns: repeat(2, minmax(0, auto))
.ga-3 grid-template-columns: repeat(3, minmax(0, auto))
.ga-4 grid-template-columns: repeat(4, minmax(0, auto))
.ga-5 grid-template-columns: repeat(5, minmax(0, auto))
.ga-6 grid-template-columns: repeat(6, minmax(0, auto))
.ga-7 grid-template-columns: repeat(7, minmax(0, auto))
.ga-8 grid-template-columns: repeat(8, minmax(0, auto))
.ga-9 grid-template-columns: repeat(9, minmax(0, auto))
.ga-10 grid-template-columns: repeat(10, minmax(0, auto))
.ga-11 grid-template-columns: repeat(11, minmax(0, auto))
.ga-12 grid-template-columns: 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

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.

Include everything using a single mixin:

custom.scss 
@use "stylemods/scss" as *;
@include grid-templates-css;
@media (width <= 480px) {
  @include grid-templates-sm-css;
}

Include everything 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;
}

The grid-utilities-css mixin includes the .grid and .grid-inline utilities that can alternatively be included using the basic grid utility or with the combined display utilities.

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 grid-templates-css;

Customizing (anchor)

The amount of columns compiled and the default :where(html) pseudo-class wrapper style used for the grid tokens can be customized with variable overrides:

custom.scss 
@use 'stylemods/scss' with (
  $fraction-grid-values: 6,
  $auto-grid-values: 6,
  $grid-tokens: ':root',
);
@use "stylemods/scss" as *;
@include grid-templates-css;
@include grid-layouts-css;

See Sass variables on the customizing page for more information about including overrides.

Source code (anchor)

grid-templates.scss 
// ---------------------------------------------------------- 
// Grid templates
// ----------------------------------------------------------
$grid-tokens:             ':where(html)' !default;
$fraction-grid-values:    12 !default;
$auto-grid-values:        12 !default;

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

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

// Variables
@mixin fraction-grid-variables {
  @for $value from 1 through $fraction-grid-values {
    --g-#{$value}: repeat(#{$value}, minmax(0, 1fr));
  }
}

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

@mixin auto-grid-variables {
  @for $value from 1 through $auto-grid-values {
    --ga-#{$value}: repeat(#{$value}, minmax(0, auto));
  }
}

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

// Grid classes
@mixin fraction-grid-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value} {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value} {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-xxl-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-xxl {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-xxl-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-xxl {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-xl-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-xl {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-xl-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-xl {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-lg-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-lg {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-lg-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-lg {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-md-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-md {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-md-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-md {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-sm-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-sm {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-sm-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-sm {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-xs-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-xs {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-xs-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-xs {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

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

@mixin fraction-grid-xxs-css {
  @for $value from 1 through $fraction-grid-values {
    .g-#{$value}-xxs {
      grid-template-columns: var(--g-#{$value});
    }
  }
}

@mixin auto-grid-xxs-css {
  @for $value from 1 through $auto-grid-values {
    .ga-#{$value}-xxs {
      grid-template-columns: var(--ga-#{$value});
    }
  }
}

// Grouped mixins
@mixin grid-templates-variables {
  @include fraction-grid-variables;
  @include auto-grid-variables;
}

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

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

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

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

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

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

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

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

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