Wrote yet another grid system lads. This one is BEM + CSS Grids.

.scss

@mixin hgrid($columns, $gap, $break, $alias) {

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

    &__u{   
        
        grid-column: span $columns; 

        @media only screen and (min-width : $break) {  

            @for $i from 1 through ($columns+1) {
                // spans
                &--span-#{$i}{
                    grid-column: span $i;
                }
                // starts
                &--start-#{$i}{
                    grid-column-start: $i;
                } 
                // ends                
                &--end-#{$i}{
                    grid-column-end: $i;
                }
            }  
    
            // alias
            @if ($alias) {
                
                @if ($columns % 3 > 0){
                    @warn "Columns not divisible by 3, therefore no thirds modifier alias";                
                } @else {
                    &--thd{
                        grid-column: span ($columns / 3);
                    }
                    &--2-thds{
                        grid-column: span (($columns / 3) * 2);
                    }
                }

                @if ($columns % 4 > 0){
                    @warn "Columns not divisible by 4, therefore no quarters modifier alias";                
                } @else {
                    &--qtr{
                        grid-column: span ($columns / 4);
                    }
                    &--3-qtrs{
                        grid-column: span (($columns / 4) * 3);
                    }
                }

                @if ($columns % 2 > 0){
                    @warn "Columns not divisible by 2, therefore no halves modifier alias";                
                } @else {
                    &--hlf{
                        grid-column: span ($columns / 2);
                    }
                }            

                &--ful{
                    grid-column: span $columns;
                }

            }
        }
    }
}

// Usage ///////

.hg{ // arbitrary namespace
    
    $break: 800px; // arbitrary breakpoint
    
    // include a 12 column grid system with a 20px gap 
    // and alias classes which appears when the screen width exceeds 800px.
    @include hgrid(12, 20px, $break, true);
    
    // extend 
    @media only screen and (min-width : $break) {  
        &--complex{
            grid-template-columns: repeat(3, 1fr);           
        }
    }
    
}

/*
    <div class="hg">
        <header class="hg__u hg__u--span-12"></header>
        <aside class="hg__u hg__u--thd"></aside>
        <main class="hg__u hg__u--2-thds hg hg--complex">
            <div class="hg__u hg__u--span-1"></div>
            <div class="hg__u hg__u--start-2 hg__u--end-3"></div>
        </main>
        <footer class="hg__u hg__u--ful"></footer>
    </div>
*/