Make container padding configurable on a per-breakpoint basis

Created by: Mevrael

Currently there is only one variable to set $grid-gutter-width which is 30px by default, however, in modern applications on some screens (breakpoints) another gutter size and container padding would be more preferable.

I would suggest adding new map variable and mixin so .container, .row, .col-* and other grid class paddings could be easily configured. Map can be empty if there is no need in chaning spacings for different breakpoints.

Here is an example how I am changing spacers for different screens.

// default main section padding (for > xl)
$app-section-padding-y: 3rem;
$app-section-padding-x: 5rem;

// main section padding for different breakpoints down
$app-section-padding: (
  xl: (3rem, 4rem),
  lg: (2.75rem, 3.5rem),
  md: (2.5rem, 3rem),
  sm: (1.25rem, 2rem)
);


@mixin app-section {
  margin-left: auto;
  margin-right: auto;
  padding: $app-section-padding-y $app-section-padding-x;

  @each $key, $list in $app-section-padding {

    @include media-breakpoint-down($key) {
      padding: nth($list, 1) nth($list, 2);
    }

  }

};