Make container padding configurable on a per-breakpoint basis #19304
Description
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);
}
}
};