Grids

Two 12 column display grids with module mixins for responsive modifiers.

Examples

Both grids use the .grid utility on a wrapper element to create a checkerboard pattern of all childs elements, the default grid uses fraction widths the autogrid uses automatic widths.

Default uses .g-* (1-12)

1
2
3
4

Auto uses .ga-* (1-12)

1
2
3
4
<div class="grid g-4 gap-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<div class="grid ga-4 gap-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The difference between the two is when the contents exceed the container width the columns stay the same in the default grid but adjust to suit the content in the autogrid.

1
The quick brown fox jumps over the lazy dog.
3
4
1
The quick brown fox jumps over the lazy dog.
3
4

As shown above the columns heights will stretch to fit the longest column, to contain the heights the individual columns adding the style align-items: start; to the grid will negate this.

1
The quick brown fox jumps over the lazy dog.
3
4
<div class="grid g-4 gap-3" style="align-items: start;">
  <div>1</div>
  <div>The quick brown fox jumps over the lazy dog.</div>
  <div>3</div>
  <div>4</div>
</div>

The CSS below demonstrates the static grid utilities as compiled.

Compiled CSS 
:where(html) {
  --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));
  --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));
}

.grid {
  display: grid;
  grid-template-columns: var(--gtc);
  grid-template-rows: var(--gtr);
}

.g-1 {
  --gtc: var(--g-1);
}

.g-2 {
  --gtc: var(--g-2);
}

.g-3 {
  --gtc: var(--g-3);
}

.g-4 {
  --gtc: var(--g-4);
}

.g-5 {
  --gtc: var(--g-5);
}

.g-6 {
  --gtc: var(--g-6);
}

.g-7 {
  --gtc: var(--g-7);
}

.g-8 {
  --gtc: var(--g-8);
}

.g-9 {
  --gtc: var(--g-9);
}

.g-10 {
  --gtc: var(--g-10);
}

.g-11 {
  --gtc: var(--g-11);
}

.g-12 {
  --gtc: var(--g-12);
}

.ga-1 {
  --gtc: var(--ga-1);
}

.ga-2 {
  --gtc: var(--ga-2);
}

.ga-3 {
  --gtc: var(--ga-3);
}

.ga-4 {
  --gtc: var(--ga-4);
}

.ga-5 {
  --gtc: var(--ga-5);
}

.ga-6 {
  --gtc: var(--ga-6);
}

.ga-7 {
  --gtc: var(--ga-7);
}

.ga-8 {
  --gtc: var(--ga-8);
}

.ga-9 {
  --gtc: var(--ga-9);
}

.ga-10 {
  --gtc: var(--ga-10);
}

.ga-11 {
  --gtc: var(--ga-11);
}

.ga-12 {
  --gtc: var(--ga-12);
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints, or alternatively enabled in the breakpoints included with the framework (see below).

.g-5
.g-5-xl
.g-5-lg
.g-5-md
.g-5-sm
.g-5-xs
1
2
3
4
<div class="grid g-1-sm g-2-md g-4 gap-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) anywhere below.

custom.scss 
@use "sassmods/scss/sassmods" as *;

:where(html) {
  @include grid-variables; 
  @include autogrid-variables;
}

@include grid-utility-css;
@include grid-css;
@include autogrid-css;

@media (max-width: 1600px) {
  @include grid-xl-css;
  @include autogrid-xl-css;
}

@media (max-width: 480px) {
  @include grid-sm-css;
  @include autogrid-sm-css;
}

Source

_grid.scss 
// ---------------------------------------------------------- 
// Grids
// ----------------------------------------------------------
$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));

$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));

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

$autogrid: (
  "ga-1": $ga-1,
  "ga-2": $ga-2,
  "ga-3": $ga-3,
  "ga-4": $ga-4,
  "ga-5": $ga-5,
  "ga-6": $ga-6,
  "ga-7": $ga-7,
  "ga-8": $ga-8,
  "ga-9": $ga-9,
  "ga-10": $ga-10,
  "ga-11": $ga-11,
  "ga-12": $ga-12,
) !default;

@mixin grid-utility {
  display: grid;
  grid-template-columns: var(--gtc);
  grid-template-rows: var(--gtr);
}

@mixin grid-utility-css {
  .grid {
    @include grid-utility;
  }
}

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

@mixin autogrid-variables {
  @each $name, $value in $autogrid {
    --#{$name}: #{$value};
  }
}

// Default grid
@mixin grid-css {
  @each $name, $value in $grid {
    .#{$name} {
      --gtc: var(--#{$name});        
    }
  }
}

// Breakpoints
@mixin grid-xl-css {
  @each $name, $value in $grid {
    .#{$name}-xl {
      --gtc: var(--#{$name});        
    }
  }
}

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

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

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

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

@mixin autogrid-css {
  @each $name, $value in $autogrid {
    .#{$name} {
      --gtc: var(--#{$name});        
    }
  }
}

// Autogrid
@mixin autogrid-xl-css {
  @each $name, $value in $autogrid {
    .#{$name}-xl {
      --gtc: var(--#{$name});        
    }
  }
}

@mixin autogrid-lg-css {
  @each $name, $value in $autogrid {
    .#{$name}-lg {
      --gtc: var(--#{$name});        
    }
  }
}

@mixin autogrid-md-css {
  @each $name, $value in $autogrid {
    .#{$name}-md {
      --gtc: var(--#{$name});        
    }
  }
}

@mixin autogrid-sm-css {
  @each $name, $value in $autogrid {
    .#{$name}-sm {
      --gtc: var(--#{$name});        
    }
  }
}

@mixin autogrid-xs-css {
  @each $name, $value in $autogrid {
    .#{$name}-xs {
      --gtc: var(--#{$name});        
    }
  }
}