grid.scss

$cols: 12;
$gap: .5rem;

.css-grid {
    display: grid;
    grid-template-columns: repeat($cols, auto);
    grid-gap: $gap $gap;

    @for $col from 1 to ($cols+1) {
        .span-#{$col} {
            grid-column: span #{$col};
        }
    }   
}

.flex-grid {
    display: flex;
    flex-wrap: wrap;

    @for $col from 1 to ($cols+1) {
        .span-#{$col} {
            width: calc( #{((100%/12)*$col)} - #{($gap * 2)});
            margin: 0 $gap ($gap * 2);
        }
    }
}

.float-grid {
    @for $col from 1 to ($cols+1) {
        .span-#{$col} {
            float: left;
            width: calc( #{((100%/12)*$col)} - #{($gap * 2)});
            margin: 0 $gap ($gap * 2);
        }
    }
}