A simple SASS utility to create layouts based on CSS Grid

grid-reloaded.scss

// These are the mixins

@mixin grid-layout($column-count, $column-gap: 3rem, $row-gap: null) {
    $row-gap: if($row-gap == null, $column-gap, $row-gap);

    display: grid;
    grid-template-columns: repeat($column-count, 1fr);
    grid-gap: $row-gap $column-gap;
    gap: $row-gap $column-gap;
}

@mixin grid-column-start($number) {
    grid-column-start: $number;
}

@mixin grid-row-start($number) {
    grid-row-start: $number;
}

@mixin grid-column-span($count) {
    grid-column-end: span $count;
}

@mixin grid-row-span($count) {
    grid-row-end: span $count;
}

usage.scss

// And this is how to use them

.grid-container {
    @include grid-layout(12, 2rem); // The $row-gap will automatically be the same as $column-gap if you omit it
}

.grid-item {
    @include grid-column-start(2);
    @include grid-column-span(4);
}