Sass mixin to customize containers & columns. Visit blog posts https://bit.ly/3bg4Rqs

columns.scss

// _columns.scss
@mixin columns($uid: column, $gap: 16px, $columns: 12) {
  @for $i from 1 through $columns {
    .#{$uid}-#{$i} {  
      margin: 0 $gap;
      width: 100% / $columns * $i;
    }
    .#{$uid}-offset-#{$i} {
      margin-left: 100% / $columns * $i;
    }
  }
  .row {
    margin-left: -$gap;
    margin-right: -$gap;
  }
}

container.scss

// _container.scss
@mixin container($uid: container, $small: 640px, $medium: 768px, $large: 1024px, $xlarge: 1280px) {
  $container: (
    '': 100%,
    '-sm': $small,
    '-md': $medium,
    '-lg': $large,
    '-xl': $xlarge,
  );
  @each $prop, $value in $container {
    .#{$uid}#{$prop} {
      max-width: $value;
    }
  }
}