A very simple grid system built with SASS and CSS grid

grid.scss

$columns: 12;
$gap: 30px;
$breakpoints: (
    xs: 480px,
    sm: 768px,
    md: 960px,
    lg: 1170px,
    xl: 1280px
);

@mixin create-selectors($breakpoint: null) {
    $infix: if($breakpoint == null, '', '-#{$breakpoint}');

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

.grid {
    display: grid;
    grid-template-columns: repeat($columns, 1fr);
    grid-gap: $gap;
    gap: $gap;
}

@include create-selectors;

@each $breakpoint, $width in $breakpoints {
    @media (min-width: $width) {
        @include create-selectors($breakpoint);
    }
}

@wiegertschouten This is fantastic- thank you for sharing! I'm using a variation of @arsors's approach to address the gap issue- setting my default gap to 50px and using gap: clamp(15px, 4vw, $gap); seems to work ok in my case.

@nickpish Glad you found it helpful, and thanks for sharing your solution!