Gaps

Gap spacing utilities to use with grid and/or flex display with module mixins for responsive modifiers.

Examples

Gap properties and sizes with class names for each utility
Properties	0	0.25rem	0.5rem	1rem	1.5rem	2rem
gap	.gap-0	.gap-1	.gap-2	.gap-3	.gap-4	.gap-5
column-gap	.gap-c-0	.gap-c-1	.gap-c-2	.gap-c-3	.gap-c-4	.gap-c-5
row-gap	.gap-r-0	.gap-r-1	.gap-r-2	.gap-r-3	.gap-r-4	.gap-r-5

Compiled CSS

.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;
}

.gap-c-0 {
  column-gap: 0;
}

.gap-c-1 {
  column-gap: 0.25rem;
}

.gap-c-2 {
  column-gap: 0.5rem;
}

.gap-c-3 {
  column-gap: 1rem;
}

.gap-c-4 {
  column-gap: 1.5rem;
}

.gap-c-5 {
  column-gap: 2rem;
}

.gap-r-0 {
  row-gap: 0;
}

.gap-r-1 {
  row-gap: 0.25rem;
}

.gap-r-2 {
  row-gap: 0.5rem;
}

.gap-r-3 {
  row-gap: 1rem;
}

.gap-r-4 {
  row-gap: 1.5rem;
}

.gap-r-5 {
  row-gap: 2rem;
}

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). The following demonstrates the static and responsive names for the .gap-1 utility.

.gap-1
.gap-1-xl
.gap-1-lg
.gap-1-md
.gap-1-sm
.gap-1-xs

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 *;
@include gaps-css;

// Example breakpoint
@media (max-width: 480px) {
  @include gaps-sm-css;
}

See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.

Source

_gaps.scss

// ---------------------------------------------------------- 
// Gaps
// ----------------------------------------------------------
$gap-0:   0 !default;
$gap-1:   0.25rem !default;
$gap-2:   0.5rem !default;
$gap-3:   1rem !default;
$gap-4:   1.5rem !default;
$gap-5:   2rem !default;

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

@mixin gaps-css {  
  @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-css {  
  @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-css {  
  @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-css {  
  @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-css {  
  @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-css {  
  @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};        
    }
  }
}