.grid {
    display: grid;
    grid-column-gap: var(--grid-spacing-horizontal);
    grid-row-gap: var(--grid-spacing-vertical);
}

@if $enable-full-grid {
    .grid {
        grid-template-rows: auto;
        grid-template-columns: repeat($grid-columns, 1fr);
        > [class*="col-"] {
            max-width: 100%;
        }

        @for $i from 1 through $grid-columns {
            .col-#{$i} {
                grid-column-start: span #{$i};
                grid-column-end: span #{$i};
            }
        }

        @each $name, $breakpoint in $breakpoints {
            @media (min-width: $breakpoint) {
                @for $i from 1 through $grid-columns {
                    .col-#{$name}-#{$i} {
                        grid-column-start: span #{$i};
                        grid-column-end: span #{$i};
                    }
                }
            }
        }
    }
} @else {
    .grid {
        @if map-get($breakpoints, 'lg') {
            grid-template-columns: 1fr;
            @media (min-width: map-get($breakpoints, 'lg')) {
                grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
            }
        }
    }
}