SCSS Grid System

// SCSS
// Grid variables
$grid-columns: 12;
$grid-gutter: 30px;
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px
);

// Container
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: $grid-gutter / 2;
    padding-left: $grid-gutter / 2;
    
    @each $breakpoint, $width in $container-max-widths {
        @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
            max-width: $width;
        }
    }
    
    &-fluid {
        width: 100%;
        padding-right: $grid-gutter / 2;
        padding-left: $grid-gutter / 2;
        margin-right: auto;
        margin-left: auto;
    }
}

// Row
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -$grid-gutter / 2;
    margin-left: -$grid-gutter / 2;
    
    &--no-gutters {
        margin-right: 0;
        margin-left: 0;
        
        > [class*="col-"] {
            padding-right: 0;
            padding-left: 0;
        }
    }
}

// SCSS
// Column base styles
[class*="col-"] {
    position: relative;
    width: 100%;
    padding-right: $grid-gutter / 2;
    padding-left: $grid-gutter / 2;
}

// Generate column classes
@mixin make-col($size) {
    flex: 0 0 percentage($size / $grid-columns);
    max-width: percentage($size / $grid-columns);
}

@mixin make-grid-columns($breakpoint: "") {
    $infix: if($breakpoint == "", "", "-#{$breakpoint}");
    
    @for $i from 1 through $grid-columns {
        .col#{$infix}-#{$i} {
            @include make-col($i);
        }
    }
}

// Generate columns for each breakpoint
@each $breakpoint, $width in $grid-breakpoints {
    @if $breakpoint == xs {
        @include make-grid-columns();
    } @else {
        @media (min-width: $width) {
            @include make-grid-columns($breakpoint);
        }
    }
}

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">Column 1</div>
        <div class="col-12 col-md-6 col-lg-4">Column 2</div>
        <div class="col-12 col-md-12 col-lg-4">Column 3</div>
    </div>
</div>

// SCSS
// Offset classes
@mixin make-grid-offsets($breakpoint: "") {
    $infix: if($breakpoint == "", "", "-#{$breakpoint}");
    
    @for $i from 0 through ($grid-columns - 1) {
        .offset#{$infix}-#{$i} {
            margin-left: if($i > 0, percentage($i / $grid-columns), 0);
        }
    }
}

// Order classes
@mixin make-grid-orders($breakpoint: "") {
    $infix: if($breakpoint == "", "", "-#{$breakpoint}");
    
    .order#{$infix}-first { order: -1; }
    .order#{$infix}-last { order: $grid-columns + 1; }
    
    @for $i from 0 through $grid-columns {
        .order#{$infix}-#{$i} { order: $i; }
    }
}

// Alignment classes
.row {
    &--align {
        &-start { justify-content: flex-start; }
        &-center { justify-content: center; }
        &-end { justify-content: flex-end; }
        &-around { justify-content: space-around; }
        &-between { justify-content: space-between; }
        
        &-items {
            &-start { align-items: flex-start; }
            &-center { align-items: center; }
            &-end { align-items: flex-end; }
        }
    }
}

// Generate utilities for each breakpoint
@each $breakpoint, $width in $grid-breakpoints {
    @if $breakpoint == xs {
        @include make-grid-offsets();
        @include make-grid-orders();
    } @else {
        @media (min-width: $width) {
            @include make-grid-offsets($breakpoint);
            @include make-grid-orders($breakpoint);
        }
    }
}

<div class="container">
    <div class="row row--align-center">
        <div class="col-6 offset-md-3">Centered Content</div>
    </div>
    <div class="row">
        <div class="col-6 order-2 order-md-1">First on Desktop</div>
        <div class="col-6 order-1 order-md-2">Second on Desktop</div>
    </div>
</div>

// SCSS
.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    
    &-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
}

// Equal-width multi-row
.row-cols {
    @for $i from 1 through 6 {
        &-#{$i} > * {
            flex: 0 0 percentage(1 / $i);
            max-width: percentage(1 / $i);
        }
    }
    
    // Responsive variants
    @each $breakpoint, $width in $grid-breakpoints {
        @if $breakpoint != xs {
            @media (min-width: $width) {
                @for $i from 1 through 6 {
                    &-#{$breakpoint}-#{$i} > * {
                        flex: 0 0 percentage(1 / $i);
                        max-width: percentage(1 / $i);
                    }
                }
            }
        }
    }
}

<div class="container">
    <div class="row">
        <div class="col">Auto Width</div>
        <div class="col">Auto Width</div>
        <div class="col-auto">Content-width</div>
    </div>
    <div class="row row-cols-2 row-cols-md-4">
        <div>Equal 1</div>
        <div>Equal 2</div>
        <div>Equal 3</div>
        <div>Equal 4</div>
    </div>
</div>