$grid-columns: ();
$grid-columns: map-merge(
        (
            '2':2,
            '3':3,
            '4':4,
            '5':5,
            '6':6,
            '7':7,
        ),
        $grid-columns
);

.grid-columns-auto {
    grid-template-columns: auto;
}

@each $name, $val in $grid-columns {
    .grid-columns-#{$name} {
        grid-template-columns: repeat(#{$val}, 1fr);
    }
}

@media (min-width: $screen-sm-max) {
    @each $name, $val in $grid-columns {
        .grid-md-columns-#{$name} {
            grid-template-columns: repeat(#{$val}, 1fr);
        }
    }
}

@media (min-width: $screen-lg-max) {
    @each $name, $val in $grid-columns {
        .grid-lg-columns-#{$name} {
            grid-template-columns: repeat(#{$val}, 1fr);
        }
    }
}


$gaps: ();
$gaps: map-merge(
        (
            '2':2,
            '4':4,
            '5':5,
            '8':8,
            '12':12,
            '16':16,
            '20':20,
            '24':24,
            '30':30,
            '32':32,
            '40':40,
            '44':44,
            '48':48,
            '54':54,
            '60':60,
            '64':64,
            '80':80,
            '108':108,
            '120':120,
        ),
        $gaps
);

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        @each $name, $val in $gaps {
            .gap#{$infix}-#{$name} {
                gap: #{$val}px !important;
            }
        }
    }
}


.d-grid {
    display: grid;
}

.grid-16 {
    display: grid;
    gap: 16px;
}

.grid-row-4 {
    grid-row: 1 / 4;
}

.grid-row-3 {
    grid-row: 1 / 3;
}

.grid-row-2 {
    grid-row: 1 / 2;
}

.grid-row-gap-16 {
    grid-row-gap: 16px !important;
}

.grid-column-gap-30 {
    grid-column-gap: 30px !important;
}

.grid-column-138-auto {
    grid-template-columns: repeat(auto-fill, 138px);
}