stylesheet.scss

// Media Query Ranges
$xsmall-screen-up: 426px !default;
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$extra-large-screen: 1600px !default;

$xsmall-and-up: "only screen and (min-width : #{$xsmall-screen-up})" !default;
$small-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$medium-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$extra-large-screen})" !default;

$num-cols: 12 !default;

.grid-container {
    display: grid;
    grid-template-columns: repeat($num-cols, 1fr);

    grid-gap: 0.5em;

    @media #{$small-and-up} { 
        grid-gap: 2em;
    }
}

$i: 1;

@while $i <= $num-cols {
    .grid-xs-#{$i} {
        grid-column: span $i;
    }

    $i: $i + 1;
}

$i: 1;

@media #{$small-and-up} {
    @while $i <= $num-cols {
        .grid-sm-#{$i} {
            grid-column: span $i;
        }

        $i: $i + 1
    }
}

$i: 1;

@media #{$medium-and-up} {
    @while $i <= $num-cols {
        .grid-md-#{$i} {
            grid-column: span $i;
        }

        $i: $i + 1
    }
}

$i: 1;

@media #{$large-and-up} {
    @while $i <= $num-cols {
        .grid-lg-#{$i} {
            grid-column: span $i;
        }

        $i: $i + 1
    }
}

$i: 1;

@media #{$extra-large-and-up} {
    @while $i <= $num-cols {
        .grid-xl-#{$i} {
            grid-column: span $i;
        }

        $i: $i + 1
    }
}