Grids & gaps

Two 12 column display grids and 3 gap utility types with 6 different sizes plus responsive modifier classes for both with 5 optional breakpoint sizes.

Examples

Grids

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>

Responsive modifiers

The grids and gaps are written with max-width breakpoints but using the styles as Sass modules enables including the grids and gaps in a custom style sheet using min-width breakpoints if preferred. The following example is 4 columns full width, 2 columns at medium and 1 column at small.

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>

Gaps

The gap utilities include .gap-* for both column and row, .gap-c-* for column only and .gap-r-* for row gaps only.

.gap-1
.gap-c-1
.gap-r-1

Each gap has 6 different size values:

.gap-0 {
  gap: 0;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 1rem;
}
.gap-4 {
  gap: 1.5rem;
}
.gap-5 {
  gap: 2rem;
}

Responsive modifiers

The responsive modifiers work the same as the grid ones:

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

Using the modules

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin(s) anywhere below.

To include everything using sassmods.scss:

@use "sassmods/scss/sassmods" as *;
$bp-xl: 1400px; // example

@include grids-and-gaps;

Or individual elements:

@use "sassmods/scss/sassmods" as *;
$bp-xl: 1400px; // example

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

.custom-grid {
  @include grid-utility;
}

@include grid;
@include gaps;

@media (max-width: #{$bp-xl}) {
  @include grid-xl;
  @include gaps-xl;
}

@media (max-width: #{$bp-sm}) {
  @include grid-sm;
  @include gaps-sm;
}

Using the framework

Enable the modules in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-grid:       true;
$enable-autogrid:   true;
$enable-gaps:       true;
$enable-bp-xl:      true;
$enable-bp-lg:      true;
$enable-bp-md:      true;
$enable-bp-sm:      true;
$enable-bp-xs:      true;

Source

Source 
// ---------------------------------------------------------- 
// Grids and gaps
// ----------------------------------------------------------
$bp-xl:   1601px;
$bp-lg:   1281px;
$bp-md:   1025px;
$bp-sm:   769px;
$bp-xs:   481px;

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

$gap-0:   0;
$gap-1:   0.25rem;
$gap-2:   0.5rem;
$gap-3:   1rem;
$gap-4:   1.5rem;
$gap-5:   2rem;

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

$gaps: (
  "0": $gap-0,
  "1": $gap-1,
  "2": $gap-2,
  "3": $gap-3,
  "4": $gap-4,
  "5": $gap-5,
) !default;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@mixin gaps {  
  @each $name, $value in $gaps {
  .gap-#{$name} {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name} {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name} {
      row-gap: #{$value};        
    }
  }
}

@mixin gaps-xl {  
  @each $name, $value in $gaps {
  .gap-#{$name}-xl {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name}-xl {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name}-xl {
      row-gap: #{$value};        
    }
  }
}

@mixin gaps-lg {  
  @each $name, $value in $gaps {
  .gap-#{$name}-lg {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name}-lg {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name}-lg {
      row-gap: #{$value};        
    }
  }
}

@mixin gaps-md {  
  @each $name, $value in $gaps {
  .gap-#{$name}-md {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name}-md {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name}-md {
      row-gap: #{$value};        
    }
  }
}

@mixin gaps-sm {  
  @each $name, $value in $gaps {
  .gap-#{$name}-sm {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name}-sm {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name}-sm {
      row-gap: #{$value};        
    }
  }
}

@mixin gaps-xs {  
  @each $name, $value in $gaps {
  .gap-#{$name}-xs {
      gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-c-#{$name}-xs {
      column-gap: #{$value};        
    }
  }
  
  @each $name, $value in $gaps {
  .gap-r-#{$name}-xs {
      row-gap: #{$value};        
    }
  }
}

@mixin grids-and-gaps {
  :where(html) {
    @include grid-variables;
    @include autogrid-variables;
  }

  .grid {
    @include grid-utility;
  }

  @include grid;
  @include autogrid;
  @include gaps;
  
  @media (max-width: #{$bp-xl}) {
    @include grid-xl;
    @include autogrid-xl;
    @include gaps-xl;
  }
  
  @media (max-width: #{$bp-lg}) {
    @include grid-lg;
    @include autogrid-lg;
    @include gaps-lg;
  }
  
  @media (max-width: #{$bp-md}) {
    @include grid-md;
    @include autogrid-md;
    @include gaps-md;
  }
  
  @media (max-width: #{$bp-sm}) {
    @include grid-sm;
    @include autogrid-sm;
    @include gaps-sm;
  }
  
  @media (max-width: #{$bp-xs}) {
    @include grid-xs;
    @include autogrid-xs;
    @include gaps-xs;
  }
}