A very basic example of using SCSS to create a basic CSS grid system, without the use of a large framework. Not yet used in production, so there are sure to be many use-cases unaccounted for, but it gets you a starting point.

simple-grid-framework-mixin.scss

@mixin grid($columns: 12, $use-classes: false) {
    .grid {
        display: grid;
        grid-template-columns: repeat($columns, 1fr);
    }
    
    .grid > * {
        order: $columns + 1;
    }
    
    @for $i from 1 through $columns {
        $column-selector: "[data-grid-column='#{$i}']";
        $span-selector: "[data-grid-span='#{$i}']";
        @if($use-classes) {
            $column-selector: ".col-#{$i}";
            $span-selector: ".span-#{$i}";
        }
        .grid > *#{$column-selector} {
            grid-column-start: #{$i};
            order: $i;
        }
        .grid > *#{$span-selector} {
            grid-column-end: span #{$i};
        }
    }
}

/* Usage
-----------
@include grid;
@include grid(10);
@include grid(12, true);

Defaults to 12 columns, using data attributes for setting columns and spans. Set the second argument to true to use classes instead.
*/