tb-grid.scss

// solve css min problem ...
@function css-function( $function, $values... ) {
  @return $function
		+ unquote( '(' )
		+ $values
		+ unquote( ')' ) ;
}

@function css-min( $values... ) {
  @return css-function(min, $values);
}

// end solve css min problem ...

$tb-grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1400px
);

.tb-grid {
  display: grid;

  grid-template-columns: repeat(12, 1fr);

  @for $i from 1 through 50 {
    &.tb-grid-gap-#{$i} {
      row-gap: #{$i}px;
      column-gap: #{css-min(#{$i}px, 8%)};
    }
  }

  > * {
    grid-column-start: span 12;
  }

  @each $breakpoint-name, $breakpoint-value in $tb-grid-breakpoints {
    @media (min-width: #{$breakpoint-value}) {
      @for $i from 1 through 12 {
        .tb-grid-#{$breakpoint-name}-#{$i} {
          grid-column-start: span #{$i};
        }
      }
    }
  }
}